73

我很确定这很容易，但我没有找到任何示例代码片段。插入换行符的最佳方法是什么（又名好 ol' br/）？

据我所知，如果我在空行的开头放了一个“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.

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

4

12 回答 12

59

最干净和最简单的解决方案是使用样式属性，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.
于 2011-07-19T19:10:58.987 回答
52

我想到了。继续往里扔一个很好的老式<br />标签。你会是金色的:)

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

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

于 2011-03-25T23:07:42.887 回答
8

这似乎不是一个答案，所以：

您也可以br使用 Jade/Pug 的内联标签格式添加内联标签，例如：

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

产生：

  <p>Some text on the first line.<br>
    Some text on the second line.
  </p>
于 2016-12-11T23:19:50.773 回答
7

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

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

然后在玉石上使用

!{content}

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

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

于 2013-04-17T07:57:37.680 回答
5

每行一个 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.

或简单地使用前：

风格 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.
于 2011-03-25T21:55:31.507 回答
0

在@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();
});

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

于 2014-01-06T21:37:37.370 回答
0

这也很好用。

div
   pre
      | this is line 1
      | this is line 2
于 2017-04-17T16:02:14.890 回答
0

给你的段落一个样式以保留换行符并用点结束 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.
于 2018-08-16T11:50:40.737 回答
0

我正在从 PUG 模板生成一个 SASS 文件，我需要each一个新行上的项目。
这对我有用：

//- 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;
*/
于 2021-04-18T11:05:18.287 回答
0 
.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.

或者

.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.
于 2022-01-24T17:01:12.830 回答
-1

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

将文本放在带有前面 | 的新行上：

p first line
br
| second line
于 2016-06-02T10:10:34.323 回答
-3

试试这个：

- for(var i = 0; i < 10; i++)
    | hello
    | world
于 2015-07-08T18:03:59.690 回答