在 VueJS 中渲染换行符

Posted 2023-02-16

【中文标题】在 VueJS 中渲染换行符

【英文标题】：Rendering newline character in VueJS

【发布时间】：2016-08-12 07:05:41

【问题描述】：

我正在创建一个笔记应用程序，用户可以通过在文本区域中输入多行文本来添加笔记。当我将笔记保存在 Firebase 中时，它会使用我想要可视化的换行符 (\n) 进行保存。

因此，我编写了一个过滤器，将这些字符替换为 <br />，效果很好。 不过，现在我需要使用 note.content 呈现我的数据，并且用户可以注入将执行的 html、CSS 和 JS。 我应该使用DOMPurify 之类的东西来验证内容还是有办法安全地呈现换行符？

【参考方案1】：

正如@shelvacu 所说，<pre> html 标记保留了空格。

但是使用它有一个严重的缺点：标签本身从项目中使用的 CSS 框架（例如 Bootstrap）继承了大量不必要的样式。

要保留空格并避免继承任何不必要的样式，请使用：

<span style="white-space: pre;">Some whitespaced content</span>

与<pre> 标记完全一样。

请注意，white-space: pre 保持文本“原样” - 如果您想在必要时添加额外的换行符，请使用：white-space: pre-wrap。

见：w3schools.com CSS white-space Property

【讨论】：

我没有使用任何 css 框架，所以我没有遇到这个问题。尽管如此，这真的很有帮助，谢谢！

这对我来说是更好的答案，因为使用

这真的救了我。谢谢@Krzysiek。

【参考方案2】：

将内容包装在 pre 元素中。

<pre> 元素将预先在其中提供空格，例如：

This is followed by a newline,
not that you can tell
<br />
<br />
<pre>You can see the newline after me!
Woohoo!</pre>

将导致：

This is followed by a newline, not that you can tell

You can see the newline after me!
Woohoo!

这样，您不需要对换行符进行任何过滤。

【讨论】：

我自己也发现了，谢谢！我会接受你的回答

非常聪明，以前从来没有遇到过这种想法

您也可以使用white-space css 属性，它有更多的选项。

使用 white-space: break-spaces; 非常适合我。

【参考方案3】：

使用white-space: pre-line; CSS 属性。

在Mozzila Doc 中写入pre-line 值：

空白序列被折叠。换行符换行 字符，<br>，并根据需要填充行框。

【参考方案4】：

在实际描述了我的问题之后，我想到了使用用于预格式化文本的 pre-tag。此标签将尊重 '\t\n' 字符并开箱即用地正确呈现文本！ 尽管句子不会自动中断并溢出宽度。 使用一些 CSS，我能够获得与其他元素相同的行为。

html:

note.content

css:

.note pre 
  white-space: pre-wrap; 
  word-wrap: break-word;
  font-family: inherit;

【讨论】：

感谢分享！

【参考方案5】：

希望这能为新访问者增加价值。

来自用户的输入。

I am big line with lots and lots of text which would make me not fit.

Line two ✌ 
Line three

输出的最佳方法

<span style="white-space: pre-line">Your Content</span>

其他方法的问题

<span style="white-space: pre">Your Content</span>

将导致在 y 轴上添加滚动

参考及更多详情：https://css-tricks.com/almanac/properties/w/whitespace

【参考方案6】：

我并不是pre 的真正粉丝（调试除外！）所以这里有另一种使用v-for 来处理这个问题的方法。这样可以更轻松地调整格式（例如，您可能想要使用列表或其他不是 span 和 br 的东西）

<span
   v-for="(line,lineNumber) of stringWithNewlines.split('\n')" 
   v-bind:key="lineNumber" >
   line <br/>
</span>

【讨论】：

完美解决方案！不过，您忘记了最后标签上的结束 / :)

真的很聪明，解决了我在使用 pre 和 lists 时遇到的随机格式问题。

【参考方案7】：

我可以使用反引号 (`)

<pre>textRenderedAsItIs</pre>

data():
  return
    textRenderedAsItIs:`Hello
                        World`
   

【参考方案8】：

将\n转换为

if (this.content.my_val && this.content.my_val !== '') 
    return this.content.my_val.replace(/\n/g, '<br />')

【参考方案9】：

你可以使用 v-html

<span v-html="yourContent"></span>

　

data():
  return
    yourContent: "Line 1 <br> Line 2"