我想说
$(someElem).text('this\n has\n newlines);
它在浏览器中用换行符呈现。我发现的唯一解决方法是在 someElem 上将 css 属性“white-space”设置为“pre”。这几乎有效，但随后我在文本和 someElem 顶部之间有一个令人讨厌的大填充，即使我将填充设置为 0。有没有办法摆脱这个？
jQuery text() 和换行符
IT技术
javascript
jquery
html
2021-01-23 23:02:59
6个回答
现在是 2015 年。此时此问题的正确答案是使用 CSSwhite-space: pre-line或white-space: pre-wrap. 干净优雅。支持该对的 IE 的最低版本是 8。
https://css-tricks.com/almanac/properties/w/whitespace/
PS在 CSS3 变得普遍之前，您可能需要手动修剪初始和/或尾随空格。
如果将 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>这是我使用的：
function htmlForTextWithEmbeddedNewlines(text) {
var htmls = [];
var lines = text.split(/\n/);
// The temporary <div/> is to perform HTML entity encoding reliably.
//
// document.createElement() is *much* faster than jQuery('<div></div>')
// http://stackoverflow.com/questions/268490/
//
// You don't need jQuery but then you need to struggle with browser
// differences in innerText/textContent yourself
var tmpDiv = jQuery(document.createElement('div'));
for (var i = 0 ; i < lines.length ; i++) {
htmls.push(tmpDiv.text(lines[i]).html());
}
return htmls.join("<br>");
}
jQuery('#div').html(htmlForTextWithEmbeddedNewlines("hello\nworld"));
或者，尝试使用.html然后用标签包装<pre>：
$(someElem).html('this\n has\n newlines').wrap('<pre />');
您可以使用 html代替text和替换每次出现的\nwith <br>。不过，您必须正确转义您的文本。
x = x.replace(/&/g, '&')
.replace(/>/g, '>')
.replace(/</g, '<')
.replace(/\n/g, '<br>');