CSS实现div模拟数字显示屏：保留全部空白、无视词边界强制换行

可行解决方案 #

最终CSS配置（以pre标签为例，div使用规则完全一致）

pre {
  /* 必须指定等宽字体，保证所有字符宽度统一 */
  font-family: "Lucida Console", "Courier New", monospace;
  border: 1px solid #000;
  padding: 0;
  margin: 5px;
  font-size: 1em;
  /* 需要容纳n个字符就直接设置为 n ch 即可 */
  width: 10ch;

  /* 核心属性：保留所有空白字符、识别原生换行符，同时连续空白到容器边界时可自动换行 */
  white-space: break-spaces;
  /* 无视单词边界，所有字符到容器边界直接断行 */
  word-break: break-all;
  /* 兼容兜底，确保无单词边界的内容也能正常断行 */
  overflow-wrap: anywhere;
}

配套HTML代码和你现有代码保持一致即可：

<pre>hello world     biiiig hi
there</pre>

原代码问题说明 #

你之前使用white-space: pre-wrap时，连续空白字符不会被识别为可换行节点，所以会出现连续空格不换行、溢出容器的问题，替换为white-space: break-spaces即可解决该问题。 #

附加问题（n个字符宽度设置）解答 #

直接使用CSS内置的ch单位即可：
ch单位的定义是当前字体下数字0的宽度，在等宽字体场景下，所有字符（包括空格、英文字母、符号）的宽度都和数字0完全相等，所以你需要容纳n个字符的宽度，直接设置width: n ch即可，无像素级偏差，完全匹配文本网格的需求。

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