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 {

  font-family: Courier New;

}

.container {

  width: 143px;

  height: 150px;

  border: 2px dashed #333;

  margin-bottom: 16px;

}

.container-header {

  padding: 8px;

  height: 16px;

  border-bottom: 2px dashed #333;

}

.container-content {

  padding: 8px;

}

.keep-all {

  word-break: break-all;

}

.break-all {

  word-break: break-all;

}

.break-word {

  word-break: break-word;

}

<div class="container">

  <div class="container-header">keep-all</div>

  <div class="container-content">

    abcdefghij klmnopqrstuvwxyz 01234 56789    

  </div>

</div>

<div class="container">

  <div class="container-header">break-all</div>

  <div class="container-content break-all">

    abcdefghij klmnopqrstuvwxyz 01234 56789    

  </div>

</div>

<div class="container">

  <div class="container-header">break-word</div>

  <div class="container-content break-word">

    abcdefghij klmnopqrstuvwxyz 01234 56789    

  </div>

</div>

Answer 2

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