CSS 显示所有空格并断开自动换行

Question

我正在尝试制作一个 div 来模拟数字读数显示文本的方式：

按原样显示所有字符（白色space）
换行到下一行，但不关心字边界之类的，只需继续向 space
将换行视为换行

本质上，我希望我的 div 像文本网格一样工作，其中每个字符都有一个 space，并且不考虑在转到下一行时单词是如何分解的。

示例：

h	e	l	l	o		w
o	r	l	d
		b	i	i	i	i
g		h	i	\n
t	h	e	r	e

会是怎样的句子：

hello world     biiiig hi
there

会显示。

但是，我似乎无法获得此行为，并且 white-space、word-break 或 overflow-wrap 的组合均无效...

var par = document.createElement("p");
var text = document.createTextNode(
    "Width of box: " + document.getElementById("textBody").clientWidth + "px"
);
par.appendChild(text);
document.body.appendChild(par);

div {
    font-family: "Lucida Console", "Courier New", monospace;
    border: 1px solid;
    margin: 1px;
    padding: 0px;
    font-size: 1em;
    width: 9ex;
    
    
    white-space: pre-wrap;
    word-break: break-word;
    overflow-wrap: anywhere;
}

<div id="textBody">hello world     biiiig hi
there</div>

上述代码段存在问题：

“世界”没有被分解和包裹
“world”和“biiiig”之间的大量 spaces 不会 honored/wrapped 到下一行

奖金问题： 我是 em/ex 单元的新手，您可能会看到我试图将 7ex 等同于“7 个字符宽”，但这似乎相差了几个 pixels/character。关于实现简单的“n 个字符宽”的任何指导？

更新：

感谢@wazz 指出 <pre>。这解决了如何处理 whitespace 的问题，更多的分词 css 让我更接近，但仍然看到 whitespace 没有被包裹到下一行:

pre {
      border: 1px solid;
      padding: 0px;
      margin: 5px;
      white-space: pre-wrap;
      white-space: -moz-pre-wrap;
      white-space: -pre-wrap;
      white-space: -o-pre-wrap;
      overflow-wrap: break-all;
      word-break: break-all;
      
      font-size: 1em;
      width: 55px;
}

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

Answer 1

你需要white-space: break-spaces

.readout {
  font-family: "Lucida Console", "Courier New", monospace;
  border: 1px solid;
  padding: 0 0 0 10px;
  margin: 5px;
  font-size: 1em;
  width: calc((1ch + 10px) * 7);  
  letter-spacing:10px;
  white-space: break-spaces;
  word-break: break-all;
}

<div class="readout">hello world     biiiig hi
there</div>

CSS 显示所有空格并断开自动换行

CSS show all whitespace and break word wrap

html

css

sizing

word-wrap

更新：