node.js Jade 中的 Line Breaks 怎么样？

What about Line Breaks in Jade?

提问by Matteo

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/)?

我很确定这很简单，但我没有找到任何示例代码片段。插入换行符的最佳方法是什么（又名好 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:

就我所见，如果我在空行的开头放了一个“br”，它会呈现为<br/>但如果我必须显示多行文本，则生成的代码非常冗长：

.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...)

有没有更好的方法来解决这个问题？（顺便说一句，我要求与图像标签相同的东西......）

采纳答案by Daniel Baulig

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

最干净和最简单的解决方案是使用 style 属性，white-space: pre;例如：

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

回答by Hacknightly

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

我想到了。继续前进，<br />在那里扔一个很好的老式标签。你会是金子:)

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

UPDATE: Jade now supports using just brfor line breaks.

更新：Jade 现在支持仅br用于换行。

回答by Jason C

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

这似乎不是答案，所以：

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

您还可以通过br使用 Jade/Pug 的内联标签格式添加内联标签来实现，例如：

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>

回答by haxxxton

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

以便您知道.. 如果您要提取此信息.. 比如说从您已经手动输入换行符的 SQL 数据库（例如在表单的文本区域中），您可以在服务器上执行以下操作你的输出

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

这 ！让 jade 知道您正在将原始 html 插入到您尝试渲染的变量中

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

来源：https: //github.com/visionmedia/jade#tag-text

回答by generalhenry

robustly with a div per line:

每行一个 div 健壮：

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:

或者简单地使用 pre：

style pre.poem { font-family:ariel }

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.

回答by yolk

I was able to do the following after @haxxxton

在@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)

例如，它可以使用函数在玉模板中使用 p!= contentParse(post.description)

回答by Krone

this also works well.

这也很好用。

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

回答by Oliver K?tter

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

给你的段落一个样式来保留换行符并用一个点结束 p 行：

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

回答by Giuseppe Leo

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

以防万一您在第一次搜索时没有使用年份过滤器： How to add br tag with Jade HTML

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

将文本放在一个新行上，前面有 |：

p first line
br
| second line

回答by user587841

Try this:

尝试这个：

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