CSS自动换行原理及无分隔符文本换行实现方法

当然可以！针对手机端表格里这类无空格、无连字符的长文本无法自动换行的问题，CSS有几个非常实用的属性能轻松搞定，下面给你逐一说明：

1. 使用 word-break: break-all #

这个属性会强制在任意字符处换行，完全不考虑单词的完整性，适合需要严格限制容器宽度（比如窄表格单元格）的场景，能确保文本不会超出容器范围。

示例代码：

.small {
  max-width: 100px; /* 模拟手机端窄容器 */
  border: 1px solid #ccc; /* 方便查看容器范围 */
  word-break: break-all;
}

对应的HTML：

<div class="small">
  <span>ThisWontGetSpiltAnymore</span>
</div>

2. 使用 overflow-wrap: break-word #

这个属性（旧版叫word-wrap，现在推荐用标准的overflow-wrap）会优先尝试保持单词的完整性，只有当整个单词完全放不下时才会拆分换行，体验更友好，适合希望尽量保留语义的场景。

示例代码：

.small {
  max-width: 100px;
  border: 1px solid #ccc;
  overflow-wrap: break-word;
}

针对表格的适配建议 #

如果是在表格里使用，直接给表格的单元格（td/th）添加这些样式即可，比如：

table td, table th {
  max-width: 200px; /* 根据手机屏幕调整合适宽度 */
  word-break: break-all; /* 或者选择 overflow-wrap: break-word */
}

这样不管是带空格、连字符的文本，还是无分隔符的长串内容，都能在手机端的表格里正常换行啦！

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