CSS显示所有空白和换行

Question

我正在尝试制作一个模仿数字读出可能显示文本的div:

• 显示任意和所有字符的本来面目(空白)
• 换行到下一行，但不关心字的边界或类似的，只是继续写字符到空格
• 将换行符视为换行符

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

的例子:w

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>