如何用jQuery精准显示含空格、换行及HTML标记的字符串？

嘿，这个问题其实很容易解决，完全不用手动编码整串内容！你已经用对了text()方法（它确实能帮你自动转义HTML标签，避免<DIV>这类内容被解析成页面元素），问题出在元素的默认渲染行为上——small是行内元素，默认不会保留开头空格、换行这类空白字符。

给你两个简单的方案，都不需要手动处理原字符串：

方案1：添加CSS样式保留空白格式 #

直接给你的.text-success类加一个CSS属性，让它渲染时严格保留空白字符：

.text-success {
  /* 保留空格、换行，同时自动换行适应容器宽度 */
  white-space: pre-wrap;
  /* 如果想要严格按原格式不自动换行，换成下面这个 */
  /* white-space: pre; */
}

你的jQuery代码完全不用改，还是原来的写法：

$("<small class='text-success'></small>").text(theString);

方案2：动态设置元素样式（无需全局CSS） #

如果不想添加全局CSS，也可以用jQuery直接给目标元素设置样式：

$("<small class='text-success'></small>")
  .text(theString)
  .css("white-space", "pre-wrap");

原理很简单：text()方法已经帮你搞定了HTML转义的问题，而white-space: pre-wrap会告诉浏览器按照字符串原本的空白格式来渲染，包括开头的空格和换行符，完美匹配你的需求！

内容的提问来源于stack exchange，提问作者John Hunter