如何用CSS实现时间戳在冒号处换行？现有属性设置无效

你的问题不是浏览器bug，是因为默认情况下，浏览器不会在无空格字符串内部的冒号处自动换行——冒号不属于西文排版规则里的默认换行点，当字符串没有空格时，浏览器会优先拆分数字来满足换行需求。

要实现你预期的换行优先级（空格 > 标点 > 连字符 > 其他），可以用以下CSS组合，同时确保元素设置正确的语言属性：

.timestamp {
  /* 禁止任意拆分字符，让浏览器寻找合适的标点换行点 */
  word-break: keep-all;
  /* 确保容器空间不足时，在合理位置触发换行 */
  overflow-wrap: anywhere;
}

在HTML中，给时间戳所在元素添加lang属性（比如lang="en"），帮助浏览器识别排版规则：

<span class="timestamp" lang="en">20240520:143000</span>

为什么之前的设置没用？ #

• word-break: break-all会强制在任意字符间换行，这就是你看到数字被拆分的原因；
• overflow-wrap: break-word仅在单词过长时换行，但对于无空格的完整字符串，它不会主动识别冒号作为换行点；
• line-break属性主要控制中日韩文本的换行规则，对西文标点的换行逻辑影响不大。

如果需要更精细的控制，也可以在冒号位置手动插入HTML的<wbr>标签（软换行机会），不过上述纯CSS方案已经能满足需求。

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