html5 或 css '智能文本流' 将句子或段落均匀分布在同样宽的行上？答案

【问题标题】：html5 or css 'smart text flow' to evenly distribute a sentence or paragraph over equally wide lines?html5 或 css '智能文本流' 将句子或段落均匀分布在同样宽的行上？
【发布时间】：2020-09-07 11:06:27
【问题描述】：

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

现在如果我把句子稍微加长，它可能需要多出一行，像这样：

注意最后一个单词是如何在单独的行上的。所以前两行已满。从某种意义上说，它们占据了这个元素中的全部可用空间。第三行只包含一个单词，而且大部分都是空的。

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

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

有没有一些巧妙的 HTML5 或 CSS3 方法来实现这一点？

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

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

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

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

【问题讨论】：

标签： html css text-alignment text-align textflow

【解决方案1】：

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

        function createBetterLineBreaks(el) {
            var originalWidth = el.offsetWidth;
            var originalHeight = el.offsetHeight;
            for (let i = originalWidth - 1; i >= 0; i--) {
                el.style.width = `${i}px`;
                if (el.offsetHeight > originalHeight) {
                    el.style.width = `${i + 1}px`;
                    break;
                }
            }
        }
        // hover effects
        document.querySelector('.box').addEventListener('mouseenter', function () {
            createBetterLineBreaks(document.querySelector('.box .text'));
        });
        document.querySelector('.box').addEventListener('mouseleave', function () {
            document.querySelector('.box .text').style.width = 'unset';
        });

        .box {
            width: 300px;
            font-size: 30px;
            border: 1px solid black;
            border-radius: 5px;
            padding: 20px;
            display: flex;
            align-items: center;
            justify-content: center;
        }

    &lt;div class="box"&gt;&lt;span class="text"&gt;hover this box to distribute the text more evenly&lt;/span&gt;&lt;/div&gt;

【讨论】：

谢谢，这实际上是一个非常好的方法！

【解决方案2】：

您正在寻找 CSS Text Module 4 属性 text-wrap: balance。已经提出但遗憾的是尚未实现，所以在此期间，使用这个 jQuery polyfill balance-text。

balanceText();

.box {
  width: 300px;
  font-size: 30px;
  border: 1px solid black;
  border-radius: 5px;
  padding: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.balance-text {
  text-wrap: balance;
}

<script src="//cdn.jsdelivr.net/npm/balance-text@3.3.0/balancetext.min.js"></script>
<div class="box"><span class="text balance-text">The words in this sentence cause it to require three lines.</span></div>

【讨论】：