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

因此，我正在开发一种密码生成器，我希望密码显示在一个div中。除了单词包装外，一切正常。像往常一样，如果下一个单词要长到当前行，文本就会在每个空格处分开。但是我希望css在开始下一行之前填充div的整个宽度

文本

abcdefghij klmnopqrstuvxyz 01234 56789

如下所示 （假定行长为13个字符）

但应该是

+-------------+
|abcdefghij kl|
|mnopqrstuvwxy|
|z 01234 56789|
+-------------+

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

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

---

我尝试了

文本对齐：justify但这只会使空格变大。
也许您可以使用CSS换行符
如果您希望在行中有相同数量的字母，则应使用单空格字体

如果您还希望在任意两个字符之间换行，请使用
wordbreak:break all
（）：


正文{
字体系列：信使新；
}
.集装箱{
宽度：143px；
高度：150像素；
边框：2个虚线#333；
边缘底部：16px；
}
.货柜头{
填充：8px；
高度：16px；
边框底部：2个虚线#333；
}
.容器内容{
填充：8px；
}
.保留所有{
单词break：打破一切；
}
.全力以赴{
单词break：打破一切；
}
.失言{
断字：断字；
}

保留所有
abcdefghij klmnopqrstuvwxyz 01234 56789
打破一切
abcdefghij klmnopqrstuvwxyz 01234 56789
失言
abcdefghij klmnopqrstuvwxyz 01234 56789
检查此项：这正是最上面的示例
+-------------+
|abcdefghij kl|
|mnopqrstuvwxy|
|z 01234 56789|
+-------------+