CSS中ch单位设置宽度后连续数字文本不自动换行问题咨询

我用ch单位设置容器宽度为10ch时，遇到一个问题：第二个<p>标签里的连续0字符没有自动换行，直接撑满了屏幕，但第一个<p>里的普通文本能正常适配宽度换行。

对应的HTML和CSS代码如下：

<html>
  <head>
    <title>Practice</title>
    <style>
      .ch-unit {
        background-color: red;
        width: 10ch;
      }
    </style>
  </head>
  <body>
    <div class="ch-unit">
      <p>
        Lorem ipsum dolor sit, amet consectetur adipisicing elit. Deleniti,
        saepe ad? Iure corrupti laborum pariatur, eos amet officia deserunt sit
        quasi quam provident facere eum commodi! Vel soluta eum fugiat.
      </p>
      <p>
        0000000000000000000000000000000000000000000000000000000000000000000000
      </p>
    </div>
  </body>
</html>

问题原因 #

普通文本有空格作为自然的换行断点，浏览器可以在空格处自动换行来适配容器宽度；但连续的数字属于无断行的连续字符序列，浏览器默认不会在这类字符中间插入换行，因此会直接撑破容器。

解决方法 #

给容器或对应的<p>标签添加以下CSS属性之一即可：

• word-break: break-all：强制在任意字符位置换行，适用于需要强制拆分连续字符的场景
• overflow-wrap: break-word：优先保留完整单词，只有当整个单词无法容纳时才拆分换行，更适合文本类内容
• hyphens: auto：启用自动连字符换行，但对纯数字的支持不如前两者直接

修改后的CSS示例（以word-break为例）：

.ch-unit {
  background-color: red;
  width: 10ch;
  word-break: break-all;
}

如果只想针对<p>标签生效：

.ch-unit p {
  word-break: break-all;
}

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