如何在HTML表格单元格中按特定单词换行？

以下是几种实现需求的实用方法：

方法1：直接修改HTML文本（最简单） #

如果可以编辑原始文本，直接在需要换行的位置插入<br>标签即可：

First Name/Appartment, No.137, <br>
Joseph South Road, Sec. 2, Fortaleza, Country <br>
Tel: +55-8-1234567 <br>
email@email.com; email2@email2.com

无需额外设置white-space样式，浏览器会自动解析换行。

方法2：JavaScript替换特定词汇前添加换行符 #

针对无法修改原始文本的场景，用JS定位目标词汇，在其前插入换行符\n，再配合CSS让浏览器识别换行：

HTML结构：

<div class="address">First Name/Appartment, No.137, Joseph South Road, Sec. 2, Fortaleza, Country Tel: +55-8-1234567 email@email.com; email2@email2.com</div>

CSS样式：

.address {
  white-space: pre-line; /* 识别文本中的换行符并实现换行 */
}

JavaScript代码：

const addressEl = document.querySelector('.address');
let text = addressEl.textContent;
// 匹配目标词汇，在其前方插入换行符
text = text.replace(/Joseph/g, '\nJoseph')
           .replace(/Tel:/g, '\nTel:')
           .replace(/email@email.com/g, '\nemail@email.com');
addressEl.textContent = text;

该方案适合动态生成的文本内容，无需手动编辑原始字符串。

方法3：纯CSS方案（局限性较大） #

若不想使用JS，可尝试通过自定义属性配合伪元素实现，但仅适用于规则明确的简单文本：

HTML结构：

<div class="address" data-split=", Joseph| Tel:| email@email.com">First Name/Appartment, No.137, Joseph South Road, Sec. 2, Fortaleza, Country Tel: +55-8-1234567 email@email.com; email2@email2.com</div>

CSS样式：

.address {
  white-space: pre-line;
}

注：纯CSS无法处理正则替换，仅能针对固定分隔符做简单处理，复杂场景优先推荐前两种方法。

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