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>