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 as I can see if I put a "br" at the beginning of an empty line, it is rendered as <br/> but if I have to show several lines of text, the resulting code is quite verbose:

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

Is there a better way to solve this? (incidentally I'm asking for the same thing with the image tag...)

MDN suggests caution using the line break element. https://developer.mozilla.org/en-US/docs/Web/HTML/Element/br#accessibility_concerns I like the `white-space: pre` solution! — rjminchuk, Jan 17 '21 at 03:29

score 61 · Accepted Answer · answered Jul 19 '11 at 19:10

61

The cleanest and easiest solution is to use the style attribute white-space: pre; eg:

.poem 
    p(style='white-space:pre;')
        | 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). |br
        | Credemmo conquistare la cultura,
        | e non ne abbiamo preso, in conclusione,
        | che la ricerca dell’affettazione.

answered Jul 19 '11 at 19:10

Daniel Baulig

10,739
6
44
43

I agree. It looks like the white-space rule has good browser support, as well. Thanks! – BMiner Sep 23 '11 at 20:38
3

@JGallardo what's the best way, then? By the way, I'd use `whitespace: pre-wrap` instead, to avoid the content overflow it's container – Luis Sieira Sep 16 '15 at 10:19
1

I would use whitespace: pre-wrap -or- whitespace: pre-line – Segev -CJ- Shmueli Apr 14 '16 at 15:16
2

This doesn't seem to work here in 2016 :/ I'm using Pug in node and the whitespace is being removed. – Charles Wood Jun 21 '16 at 19:20
Prefer `pre-line`. There's a comparison table [here](https://developer.mozilla.org/pt-BR/docs/Web/CSS/white-space) – giovannipds Oct 22 '20 at 22:03

score 53 · Answer 2 · edited Dec 23 '15 at 15:54

53

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.

edited Dec 23 '15 at 15:54

random_user_name

25,694
7
76
115

answered Mar 25 '11 at 23:07

Hacknightly

5,109
1
26
27

1

the pipes aren't needed in the current version of jade – generalhenry Mar 25 '11 at 23:29
3

@generalhenry: Actually, I'm working with a xml doctype and, if I don't use pipes, the first word of the line is used as tag, AFAIK. – Matteo Mar 26 '11 at 08:29
+1 This is the cleanest solution, but as stated by Matteo, the pipes are needed! – GijsjanB Aug 22 '13 at 09:19
pretty sure there needs to be a space after those pipes, or you could add a period: `p.` and skip the pipes in the indented content – ptim May 13 '14 at 13:57
There is no space necessary after the pipe. At least not in Jade 1.3.1 – Hacknightly May 14 '14 at 00:36
this is the most reliable answer the marked one does not work, however why use
[link](http://stackoverflow.com/questions/1946426/html-5-is-it-br-br-or-br) gives reason why you should to use
unless you are serving an xhtml or xml doctype? – Snymax Jun 12 '15 at 00:34

score 8 · Answer 3 · answered Dec 11 '16 at 23:19

8

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>

answered Dec 11 '16 at 23:19

Jason C

38,729
14
126
182

1

Thanks .. I was looking for a **break** to work among html tags – Gagandeep Singh Oct 14 '17 at 14:57

score 7 · Answer 4 · answered Apr 17 '13 at 07:57

7

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

answered Apr 17 '13 at 07:57

haxxxton

6,422
3
27
57

1

That's fine until the content contains some actual HTML, e.g. ` – joeytwiddle Jul 25 '13 at 13:13
I think that it should be something like `div!= content` in the Jade (Pug?) template. – R891 Apr 28 '16 at 01:46

score 5 · Answer 5 · answered Mar 25 '11 at 21:55

robustly with a div per line:

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

or simply with a pre:

style pre.poem { font-family:ariel }

pre.poem 
  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.

not to nitpick, but according to a strict doctype, p tags can only contain inline elements, so your first example may not pass validation, depending on the doctype. — Russell Leggett, Mar 31 '11 at 14:22

score 0 · Answer 6 · answered Jan 06 '14 at 21:37

0

I was able to do the following after @haxxxton

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

For example, it can be used in a jade template using the function p!= contentParse(post.description)

answered Jan 06 '14 at 21:37

yolk

729
7
10

4

oh no no no. This is far too complicated – JGallardo Dec 10 '14 at 05:10

score 0 · Answer 7 · answered Apr 17 '17 at 16:02

0

this also works well.

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

answered Apr 17 '17 at 16:02

Krone

1
1

score 0 · Answer 8 · answered Aug 16 '18 at 11:50

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.

score 0 · Answer 9 · answered Apr 18 '21 at 11:05

I was generating a SASS file from PUG template and I needed each item on a new line.
This is what worked for me:

//- custom-variables.pug
//- GENERATE COLORS
each color, idx in colors
    | #{idx}: #{color};
    |

const pug = require("pug");

const colors = {
  $primary: "#0074d9",
  $secondary: "#ff4136",
  $green: "green",
};

// Compile the source code
const compiledFunction = pug.compileFile("./scripts/custom-variables.pug");

console.log(compiledFunction({ colors }));
// outputs:
/*
$primary: #0074d9;
$secondary: #ff4136;
$green: green;
*/

score 0 · Answer 10 · answered Jan 24 '22 at 17:01

.poem: pre(style="font-family: unset").
  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.

or

.poem: p(style="white-space: pre-wrap").
  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.

A good answer will always include an explanation why this would solve the issue, so that the OP and any future readers can learn from it. — Tyler2P, Jan 24 '22 at 18:45

score -1 · Answer 11 · edited May 23 '17 at 12:26

-1

Just in case you have not used the year filter on the first search: How to add br tag with Jade HTML

Put the text on a new line with a preceding |:

p first line
br
| second line

edited May 23 '17 at 12:26

Community

1
1

answered Jun 02 '16 at 10:10

Giuseppe Leo

49
4

user587841 · Answer 12 · 2015-08-16T03:26:31.520

-3

Try this:

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

edited Aug 16 '15 at 03:26

answered Jul 08 '15 at 18:03

user587841

29
3

1

Thank you for posting an answer to this question! Code-only answers are discouraged on Stack Overflow, because a code dump with no context doesn't explain how or why the solution will work, making it difficult for the original poster (or any future readers) to understand the logic behind it. Please, edit your question and include an explanation of your code so that others can benefit from your answer. Thanks! – Maximillian Laumeister Aug 16 '15 at 03:52

What about Line Breaks in Jade?

12 Answers12

Linked