玉的换行怎么样?


72

我很确定这是理所当然的,但是我没有找到任何示例代码片段。插入换行符的最佳方法是什么(又称“ 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.

有没有更好的方法来解决这个问题?(顺便说一句,我要求使用图片标签来做同样的事情...)


我正
想问

Answers:


57

最干净,最简单的解决方案是使用样式属性,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 2011年

3
那么,@ JGallardo的最佳方法是什么?顺便说一句,我会改用whitespace: pre-wrap以避免内容溢出的容器
Luis Sieira

1
我会使用空格:换行
Segev -CJ- Shmueli

1
这似乎在2016年在这里不起作用:/我在节点中使用Pug,空白被删除了。
查尔斯伍德

更喜欢pre-line。有一个比较表在这里
giovannipds

52

我想到了。只要继续往前扔一个好的老式<br />标签即可。你会变得很金:)

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

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


1
当前版本的玉石中不需要管道
-generalhenry

3
@generalhenry:实际上,我正在使用xml doctype,并且,如果我不使用管道,则该行的第一个单词用作标签AFAIK。
Matteo'3

+1这是最干净的解决方案,但正如Matteo所说,需要管道!
GijsjanB

非常确定在这些管道之后需要有一个空格,否则您可以添加一个句点:p.并在缩进内容中跳过管道
ptim

管道后没有必要的空间。至少在Jade 1.3.1中不存在
每隔

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>

1
谢谢..我一直在寻找一个突破工作中的HTML标签
Gagandeep

6

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

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

然后在玉器中使用

!{content}

!让Jade知道您要将原始html插入要渲染的变量中

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


1
直到内容包含一些实际的HTML(例如)之前,都可以<script src=.....>。如果要插入原始HTML,则可能应该转义特殊的HTML字符,例如< >&。Jade的runtime.js有一个escape()函数,似乎可以逃避其中的一些。
joeytwiddle13年

我认为应该类似于div!= contentJade(Pug?)模板中的内容。
乔什

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

8
不是严格的docp,而是根据严格的doctype,p标签只能包含内联元素,因此根据doctype,第一个示例可能无法通过验证。
罗素·莱格特

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)


4
哦,不,不,不。这太复杂了
JGallardo 2014年

0

这也很好。

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

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.


-3

尝试这个:

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

1
感谢您发布此问题的答案!不鼓励在Stack Overflow上使用仅代码的答案,因为没有上下文的代码转储无法解释解决方案的工作方式或原因,从而使原始张贴者(或任何未来的读者)难以理解其背后的逻辑。请编辑您的问题,并附上代码说明,以便其他人可以从您的答案中受益。谢谢!
Maximillian Laumeister 2015年
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.