CSS 用字母填充 div 的整个宽度，而不改变字间距

Question

所以我正在研究一种密码生成器，我希望密码显示在一个 div 中。一切正常，除了自动换行。像往常一样，如果下一个单词对于当前行来说太长，文本就会在每个空格处被拆分。但我希望 css 在开始下一行之前填充 div 的整个宽度。

文本abcdefghij klmnopqrstuvwxyz 01234 56789显示如下（假设行长为 13 个字符）

+-------------+

|abcdefghij   |

|klmnopqrstuvw|

|xyz 01234    |

|56789        |

+-------------+

但应该是

+-------------+

|abcdefghij kl|

|mnopqrstuvwxy|

|z 01234 56789|

+-------------+

基本上所有行都应该有相同数量的字母。

虽然我不希望 div 的宽度是绝对的，而是屏幕宽度的 80%。

我试过了，text-align:justify;但这只会使空间更大。

Answer 1

如果你想在一行中有相同数量的字母，你应该使用等宽字体。如果您还希望在任意两个字符之间换行 - 使用word-break: break-all（MDN）：body {&nbsp; font-family: Courier New;}.container {&nbsp; width: 143px;&nbsp; height: 150px;&nbsp; border: 2px dashed #333;&nbsp; margin-bottom: 16px;}.container-header {&nbsp; padding: 8px;&nbsp; height: 16px;&nbsp; border-bottom: 2px dashed #333;}.container-content {&nbsp; padding: 8px;}.keep-all {&nbsp; word-break: break-all;}.break-all {&nbsp; word-break: break-all;}.break-word {&nbsp; word-break: break-word;}<div class="container">&nbsp; <div class="container-header">keep-all</div>&nbsp; <div class="container-content">&nbsp; &nbsp; abcdefghij klmnopqrstuvwxyz 01234 56789&nbsp; &nbsp;&nbsp;&nbsp; </div></div><div class="container">&nbsp; <div class="container-header">break-all</div>&nbsp; <div class="container-content break-all">&nbsp; &nbsp; abcdefghij klmnopqrstuvwxyz 01234 56789&nbsp; &nbsp;&nbsp;&nbsp; </div></div><div class="container">&nbsp; <div class="container-header">break-word</div>&nbsp; <div class="container-content break-word">&nbsp; &nbsp; abcdefghij klmnopqrstuvwxyz 01234 56789&nbsp; &nbsp;&nbsp;&nbsp; </div></div>

Answer 2

也许你可以使用 CSS Word Wrap&nbsp;https://developer.mozilla.org/pt-BR/docs/Web/CSS/word-wrap