Code on jade:

.thumbnail .thumbnail-inner a(href="#") img(src="img-1.jpg") span.overlay

Compiles:

 <div class="thumbnail"> <div class="thumbnail-inner"><a href="#"><img src="img-1.jpg"><span class="overlay"></span></a></div> </div>

And you need:

 <div class="thumbnail"> <div class="thumbnail-inner"> <a href="#"> <img src="img-1.jpg"> <span class="overlay"></span> </a> </div> </div>

    1 answer 1

    The result of the compilation and what you need is the same thing. Jade wrote the code

     <div class="thumbnail-inner"> <a href="#"> <img src="img-1.jpg"> <span class="overlay"></span> </a> </div>

    as a string

     <div class="thumbnail-inner"><a href="#"><img src="img-1.jpg"><span class="overlay"></span></a><div>

    This will not affect the display in the browser.

    If you still want hyphenation, jade has a pretty option, which if true adds padding.

    For example, in gulp it will look like this (pug is a new name for jade)

     .pipe(pug({ pretty: true }))

    The result of compiling with pretty: true will repeat the transfers from the jade file.

    Full list of options: http://jade-lang.com/api/

    • There will be no transfers if these are inline elements. Pretty option is enabled. - bingumd