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

Question

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

现在，如果我把句子稍微长一点，可能需要额外一行，如下所示：

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

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

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

有一些聪明的 HTML5 或 CSS3 方法来实现这一点吗？

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

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

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

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

Answer 1

您正在寻找 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>

Answer 2

我知道您要求一种 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;
}

<div class="box"><span class="text">hover this box to distribute the text more evenly</span></div>