What about Line Breaks in Jade?

Question

I\'m pretty sure that this is a no-brainer but I didn\'t find any snippet of sample code. What\'s the best way to insert line breaks (aka the good ol\' br/)?

As far

Answer 1

This doesn't seem to be an answer, so:

You can also do it by adding inline br tags using Jade/Pug's inline tag format, e.g.:

p.
    Some text on the first line.#[br]
    Some text on the second line.

Produces:

  <p>Some text on the first line.<br>
    Some text on the second line.
  </p>

Answer 2

this also works well.

div
   pre
      | this is line 1
      | this is line 2

Answer 3

Give your paragraph a style to keep the newlines and end the p line with a dot:

.poem 
  p(style="white-space: pre-line;").
    Si chiamava Tatiana, la sorella… 
    Noi siamo i primi, almeno lo crediamo
    Che un tale nome arditamente nella
    Cornice d’un romanzo introduciamo.
    E che dunque? E’ piacevole, sonoro.
    Lo so che a molti privo di decoro 
    Apparirà, già fuori moda, e degno
    Piuttosto d’un ancella, certo segno, 
    confessiamolo pur senza paura,
    di quanto s’è noialtri al gusto avversi
    nei nostri nomi (a non parlar di versi).
    Credemmo conquistare la cultura,
    e non ne abbiamo preso, in conclusione,
    che la ricerca dell’affettazione.

Answer 4

I figured it out. Just go ahead and throw a good ol' fashioned <br /> tag in there. You'll be golden : )

p
 |hey this is my <br />
 |broken paragraph!

UPDATE: Jade now supports using just br for line breaks.

Answer 5

so that you're aware.. if you're pulling this information.. say from an SQL database where you've already manually entered in line breaks (say in a textarea of a form) you can do the following on the server to your output

var contentParse = function(content){
    content = content.replace(/\n?\r\n/g, '<br />' );
    return content;
};

and then in jade use

!{content}

the ! lets jade know that you're inserting raw html into the variable you're trying to render out

source: https://github.com/visionmedia/jade#tag-text

Answer 6

Try this:

- for(var i = 0; i < 10; i++)
    | hello
    | world