html5 或 css '智能文本流' 將句子或段落均勻分布在同樣寬的行上？

Question

假設我有一個動態 HTML 元素（ span或div或其他），里面有一個句子或一段文本，如下所示：

現在如果我把句子稍微長一點，它可能需要額外的一行，像這樣：

請注意最后一個單詞是如何在單獨的行上的。 所以前兩行已滿。 從某種意義上說，它們占據了這個元素中的全部可用空間。 第三行只包含一個單詞，而且大部分都是空的。

我覺得這很令人不安，我想知道是否有一個技巧可以在所有行之間更均勻地分配可用空間。 我的意思是這樣的：（請注意，這是完全相同的句子）

它應該根據字體和瀏覽器視圖大小以及元素的寬度自動重新流動，這可能取決於屏幕分辨率。

是否有一些聰明的 HTML5 或 CSS3 方法來實現這一點？

在搜索和查看與此問題類似的主題后，我確實找到了我熟悉但並不是我真正想要的text-align: justify屬性。
text-align: justify傾向於通過增加單詞之間的空格來將所有行擴展到包含元素的完整行。

相反，我真正要尋找的是重新分配單詞的東西，以便所有行都更窄，即不占用所有水平元素空間。 以某種方式導致所有線條都一樣寬（或盡可能接近）。

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

將此與上面的示例進行比較。

Answer 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; }

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

Answer 2

您正在尋找 CSS文本模塊 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>