javascript - 使用 CSS 分隔词组并强制换行

Question

这是一个挑战!我有一个包含一些文本的 DIV:

<div class="extended-text">One Two Three Four Five Six</div>

不使用 HTML 标记，例如，中断 <br> , 不间断空格   ，或类似的，我如何巧妙地优先使用 CSS 或脚本作为最后的手段，在出现一组单词时强制换行？

---

例如，对于这个扩展文本:

一二三四五六

将“一二”与“三四五六”分开并强制换行，显示:

一二

三四五六

---

注意:考虑过在 HTML 中使用不间断的空格和中断，例如下面的例子，但这会非常困惑。

<div class="extended-text">One&nbsp;Two<br>Three&nbsp;Four&nbsp;Five&nbsp;Six<div>

---

谢谢。

Answer 1

您可以使用 CSS 非常简单地完成此操作。这是一种方法。

/* This will break the text after each span */
span::before {content: '\A'; white-space: pre;}

<div>
  <span>One Two</span><span>Three Four Five Six</span>  
</div>