如何在HTML Div的引号内文本中添加换行

方案1：Unicode换行符 + CSS控制换行 #

框架通常会转义HTML标签，但Unicode换行符（\u000A）一般不会被拦截。将内容改为带该换行符的形式，再给容器添加CSS属性让换行生效：

HTML代码：

<div>Book name is:\u000ATestbook</div>

CSS样式：

div {
  white-space: pre-line; /* 可选pre-wrap，前者合并多余空格，后者保留所有空格换行 */
}

方案2：JavaScript动态注入内容 #

如果静态HTML的内容被强制转义，用JS直接操作DOM可绕过框架的转义逻辑：

// 获取目标容器
const targetDiv = document.querySelector('div');
// 用textContent设置内容，换行符会被保留，配合CSS生效
targetDiv.textContent = 'Book name is:\nTestbook';
// 若框架允许且内容可控，也可使用innerHTML（注意XSS风险）
// targetDiv.innerHTML = 'Book name is:<br>Testbook';

同样给div加上white-space: pre-line的CSS样式，确保换行正常显示。

方案3：CSS伪元素拆分文本（仅内容固定时适用） #

如果内容固定为"Book name is:Testbook"，可以用CSS强制拆分两行：

div {
  white-space: pre;
}
div::after {
  content: '\a'; /* CSS语法中的换行符 */
}

该方案仅适合内容完全固定的场景，灵活性不如前两种。

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