jQuery中.text()方法内无法实现换行，\n不生效的原因排查

嘿，这个问题我之前也踩过坑！核心原因是你搞混了纯文本换行符和HTML的换行规则：

• JavaScript字符串里的\n是用于纯文本环境的换行符，但当你通过jQuery的.text()方法把内容插入到DOM元素中时，浏览器会把\n当成普通的空白字符处理，并不会解析成换行效果。
• HTML里的换行是靠<br>标签实现的，或者通过CSS控制空白字符的渲染方式。

下面给你两种可行的解决方案：

方案一：用.html()替换.text()，使用<br>标签换行 #

直接把字符串里的\n换成HTML的换行标签，同时改用.html()方法插入内容（因为.text()会把HTML标签当成普通文本渲染）：

button = 0; 
var cardTextDefault = function(textInProzent){ 
  $("#button").html('text part I.<br> is:' + textInProzent + '%<br><br> text part two'); 
}

（另外注意你代码里的percent应该是参数textInProzent，我已经帮你修正了这个小笔误~）

方案二：用CSS控制空白字符渲染，保留\n换行 #

如果不想修改JS里的字符串结构，可以给按钮元素添加CSS样式，让浏览器识别\n为换行：

#button {
  white-space: pre-line;
}

然后JS代码保持原来的.text()写法即可：

button = 0; 
var cardTextDefault = function(textInProzent){ 
  $("#button").text('text part I.\n is:' + textInProzent + '%\n\n text part two'); 
}

white-space: pre-line会保留换行符，同时合并多余的空白，很适合这种场景。

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