如何避免表格td内带逗号文本在逗号处换行？

要解决表格td内文本在逗号位置自动换行的问题，只需通过CSS控制文本换行规则，让浏览器仅在空格处换行，而非标点符号位置。

核心方法：添加CSS换行控制属性 #

给td元素设置以下两个CSS属性：

• word-break: keep-all：限制浏览器仅在空格或合法单词分隔符处换行，不会在逗号等标点中间拆分文本。
• overflow-wrap: break-word：确保单个超长单词能被强制拆分换行，避免内容溢出单元格。

修改后的完整代码 #

CSS代码

table,
th,
td {
  border: 1px solid black;
  border-collapse: collapse;
}

td {
  word-break: keep-all;
  overflow-wrap: break-word;
}

HTML代码

<table style="width:100%">
  <tr>
    <th width="50%;">Address</th>
    <th width="50%;">Email</th>
  </tr>
  <tr>
    <td>416, Willow Brook Lane, Suite 567, Apartment Riverview, Brookside Complex, Greenfield Eastern District, Riverside County, California, United States</td>
    <td>name@email.com</td>
  </tr>
</table>

如果不需要全局修改所有td，也可以直接给目标td添加行内样式：

<td style="word-break: keep-all; overflow-wrap: break-word;">416, Willow Brook Lane, Suite 567, Apartment Riverview, Brookside Complex, Greenfield Eastern District, Riverside County, California, United States</td>

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