jQuery text（）和换行符

javascript jquery html

2022-08-30 04:25:15

我想能够说

$(someElem).text('this\n has\n newlines);

，并在浏览器中使用换行符呈现。我发现的唯一解决方法是在 someElem 上将 css 属性 “white-space” 设置为 'pre'。这几乎有效，但是即使我将填充设置为0，我在文本和someElem的顶部之间也有一个令人讨厌的大填充。有没有办法摆脱这种情况？

答案 1

现在是2015年。此时，此问题的正确答案是使用 CSS 或。干净优雅。支持该对的最低版本的IE是8。white-space: pre-linewhite-space: pre-wrap

https://css-tricks.com/almanac/properties/w/whitespace/

附言~~：在CSS3变得普遍之前~~，您可能需要手动修剪初始和/或尾随空格。

答案 2

如果将 jQuery 对象存储在变量中，则可以执行以下操作：

var obj = $("#example").text('this\n has\n newlines');
obj.html(obj.html().replace(/\n/g,'<br/>'));

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p id="example"></p>

如果您愿意，还可以创建一个函数来通过简单的调用来执行此操作，就像jQuery.text（）所做的那样：

$.fn.multiline = function(text){
    this.text(text);
    this.html(this.html().replace(/\n/g,'<br/>'));
    return this;
}

// Now you can do this:
$("#example").multiline('this\n has\n newlines');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p id="example"></p>

jQuery text（） 和换行符

jQuery text（）和换行符