css中第n個單詞的斷字

Question

我有一個很大的句子如下：

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud ullamco laboris nisi ut aliquip ex ea commodo consequat.

我想在每 6 個單詞處打破這個巨大的句子。 所以它應該如下所示：

Lorem ipsum dolor sit amet, consectetur
adipiscing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna 
aliqua. Ut enim ad minim veniam, quis
nostrud ullamco laboris nisi ut aliquip
ex ea commodo consequat.

我嘗試了以下 css 規則：

word-break: break-all;

沒有影響。 接下來我嘗試：

 overflow: visible;
    width: 0px;

這打破了每一個字都排成一行。 關於如何在第 6 個單詞斷字有什么幫助嗎？

Answer 1

正如另一個答案所提到的，CSS 無法添加換行符。

但是，CSS 中有一個鮮為人知的單位： ch 。 根據您使用的字體，您可能能夠大致實現您想要的：

 div { width: 32.5ch; }

 <div> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud ullamco laboris nisi ut aliquip ex ea commodo consequat. </div>

如果這對您的用例不起作用，更可靠的解決方案是在文本中手動添加換行符，然后使用white-space: pre-wrap來顯示它們，如本答案中所述。

Answer 2

您可能想要使用第二個解決方案，但將寬度設置為足夠寬以容納大約 6 個單詞。

overflow: visible;
width: 100px; /* 6 word width */

沒有辦法在 CSS 中打破 6 個單詞，替代方法是在 JS 或一些預處理器中的每 6 個單詞之后添加<br /> 。

Answer 3

我知道您已經提到您希望在 CSS 中使用它。 但是，如果允許使用 JS，則無需猜測寬度就很容易了。 所以即使世界長度很大，這也會起作用。

請參閱下面的片段：

 var text = document.getElementById("text").innerText; text = text.match(/(\\S+ ){1,6}/g).join("<br>"); // You can change the number 6 to whatever you want. document.getElementById("text").innerHTML = text;

 <div id="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>