html5或CSS的“智能文本流”将句子或段落均匀分布在同样宽的行上？

Question

假设我有一个动态HTML元素（span或div或其他内容），其中包含文本的句子或段落，如下所示：

现在，如果我将句子稍长一些，可能需要多加一行，如下所示：

<< img src =“ https://image.soinside.com/eyJ1cmwiOiAiaHR0cHM6Ly9pLmltZ3VyLmNvbS8yWk40RXAxLnBuZyJ9” alt =“三行错误”>

请注意最后一个单词如何在单独的行上。因此，前两行已满。从某种意义上说，它们占用了此元素中的全部可用资源。第三行仅包含一个单词，并且大部分保持空白。

我觉得这很令人不安，我想知道是否有技巧可以在所有行之间更均匀地分配可用空间。我的意思是这样的：（请注意，这是完全相同的句子）

<< img src =“ https://image.soinside.com/eyJ1cmwiOiAiaHR0cHM6Ly9pLmltZ3VyLmNvbS9GVHVEYWlKLnBuZyJ9” alt =“三行，右

它应该根据字体和浏览器视图的大小以及元素的宽度自动重排，这可能取决于屏幕分辨率。

是否有一些聪明的HTML5或CSS3方法来实现这一目标？

[在搜索和查找与此问题类似的主题时，确实找到了我熟悉的text-align: justify属性，但并不是我真正想要的属性。text-align: justify倾向于通过增加单词之间的空白来将所有行扩展到包含元素的全部。

相反，我真正要寻找的是重新分配单词的东西，以便所有行都更窄，即不占用所有水平元素空间。以某种方式导致所有行的宽度相等（或使其尽可能接近）。

所以我的意思不是这样：（text-align:justify就是这样做的]

<< img src =“ https://image.soinside.com/eyJ1cmwiOiAiaHR0cHM6Ly9pLmltZ3VyLmNvbS9VbDhibHNLLnBuZyJ9” alt =“文本对齐对齐”>

将此与上面的示例进行比较。

Answer 1

我知道您要求CSS解决方案，但我认为还没有。同时，下面是我的JS解决方案。