logo标签列表

Jade中的换行是怎样的？

node.jspug
76

我相信这很容易，但我没有找到任何示例代码片段。什么是插入换行符（即老式的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.

有没有更好的方法解决这个问题？（顺便问一句，我也想知道如何处理图像标签...）

我本来想问这个问题的，谢谢 +1 - Hacknightly
MDN建议使用换行元素时要小心。https://developer.mozilla.org/en-US/docs/Web/HTML/Element/br#accessibility_concerns 我喜欢white-space: pre的解决方案！ - rjminchuk
12个回答
61

最干净，最简单的解决方案是使用样式属性 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.
我同意。看起来空格规则在浏览器上得到了很好的支持。谢谢！ - BMiner
3
那么，最好的方法是什么呢？顺便说一句，我会使用whitespace：pre-wrap，以避免内容溢出其容器。 - Luis Sieira
1
我会使用 whitespace: pre-wrap 或者 whitespace: pre-line。 - Segev -CJ- Shmueli
2
这似乎在2016年不起作用 :/ 我正在使用Node中的Pug，空格被删除了。 - Charles Wood
更倾向于使用 pre-line。这里有一个比较表格（链接在此处）。 - giovannipds
53

我弄明白了。只需加入一个老式的好用的 <br /> 标记就可以了。你会很顺利的 :)

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

更新: Jade现在支持仅使用br作为换行符。

1
在当前版本的Jade中不需要使用管道。 - generalhenry
3
@generalhenry说：实际上我正在使用xml文档类型，如果我不使用竖线，据我所知，行的第一个单词会被用作标记。 - Matteo
+1 这是最干净的解决方案，但正如 Matteo 所述，需要使用管道！ - GijsjanB
很确定在这些管道符后面需要加上一个空格，或者你可以添加一个句点：p.并跳过缩进内容中的管道符。 - ptim
在管道符号后面不需要加空格，至少在Jade 1.3.1中是这样的。 - Hacknightly
这是最可靠的答案，标记的那个不起作用，然而为什么要使用 <br />？链接给出了理由，为什么你应该使用 <br>，除非你正在使用xhtml或xml doctype。 - Snymax
8
这似乎不是一个答案，所以：
你也可以通过使用Jade/Pug的内联标签格式添加内联 br 标记来实现，例如：
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>
1
谢谢..我正在寻找一个在HTML标签之间工作的break。 - Gagandeep Singh
7

注意，如果您从已经手动输入换行符的SQL数据库中提取此信息（例如表单文本区域），则可以在服务器上对输出执行以下操作：

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

然后在jade中使用

!{content}

感叹号！告诉Jade你正在将原始HTML插入到要呈现的变量中

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

1
直到内容包含一些实际的HTML，例如<script src=.....>，这还好。如果您要插入原始HTML，则应该转义特殊的HTML字符，例如< >和&。Jade的runtime.js有一个escape()函数，它似乎可以转义其中一些字符。 - joeytwiddle
我认为在Jade（Pug？）模板中应该是类似于div！= content的东西。 - R891
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 标签：

样式 pre.poem { 字体: 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.
8
不挑剔，但根据严格的文档类型定义，p 标签只能包含内联元素，因此您的第一个示例可能无法通过验证，具体取决于文档类型。 - Russell Leggett
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.
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.
一个好的答案总是会包括解释为什么这样做可以解决问题，这样原帖作者和任何未来的读者都可以从中学习。 - Tyler2P
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();
});

例如，可以在jade模板中使用函数p!= contentParse(post.description)。
4
哦不不不。这太复杂了。 - JGallardo
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;
*/
0

这也很好用。

div
   pre
      | this is line 1
      | this is line 2
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接