我很确定这是不费脑子的,但我没有找到任何示例代码片段。 插入换行符的最佳方式是什么(又名好的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.
有没有更好的方法来解决这个问题? (顺便说一句,我要求用图片标签做同样的事情......)
答案 0 :(得分:54)
最干净,最简单的解决方案是使用样式属性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.
答案 1 :(得分:50)
我明白了。继续前进,在那里抛出一个好的'<br />
标签。你会成为金色的:)
p
|hey this is my <br />
|broken paragraph!
更新:Jade现在支持仅使用br
换行。
答案 2 :(得分:6)
这样你就知道..如果你正在提取这些信息..从你已经在换行符中手动输入的SQL数据库中说(比如在表格的文本区域中)你可以执行以下操作服务器到你的输出
var contentParse = function(content){
content = content.replace(/\n?\r\n/g, '<br />' );
return content;
};
然后在玉器中使用
!{content}
这个!让jade知道你将原始html插入到你试图渲染的变量中
答案 3 :(得分: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:
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.
答案 4 :(得分:5)
这似乎不是答案,所以:
您也可以使用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>
答案 5 :(得分: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)
答案 6 :(得分:0)
答案 7 :(得分:0)
这也很有效。
div
pre
| this is line 1
| this is line 2
答案 8 :(得分: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.
答案 9 :(得分: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;
*/
答案 10 :(得分:-2)
试试这个:
- for(var i = 0; i < 10; i++)
| hello
| world