使用 CSS 分隔单词组并强制换行答案

【问题标题】：Use CSS to separate groups of words and force line break使用 CSS 分隔单词组并强制换行
【发布时间】：2020-01-18 08:41:22
【问题描述】：

这是一个挑战！我有一个包含一些文本的 DIV：

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

如果不使用 HTML 标记，例如换行符<br>、非换行符空格&nbsp; 或类似的，我如何巧妙地使用 CSS 最好，或者脚本作为最后的手段，在出现时强制换行一组词？

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

一二三四五六

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

一二

三四五六

注意：曾想过在 HTML 中使用非分隔空格和分隔符，例如下面，但这会很混乱。

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

谢谢。

【问题讨论】：

您需要通过脚本添加额外的 html，因为 css 无法在您当前的结构中做到这一点
也许可以玩列div { width: 220px; height: 200px; column-count: 2; column-gap: 10px; }
大家好。对于那些投票结束这个问题的人，请注意，是的，我已经尝试过自己的挑战，是的，确实做了研究，找不到解决方案，并来到 Stack Overflow 寻求指导和支持。我已使问题尽可能简单明了，以帮助回答。只是寻找一种简单的方法来实现单词组之间的换行，而无需在 HTML 中构建不必要的细节。谢谢。
如果你不能直接改变标记，你将不得不使用JS来添加标记（例如<br>）。由于:nth-word 尚不存在，因此无法仅使用 CSS 来做到这一点。
@user4806509 如果您不显示您的尝试，那么这看起来像是一个请为我编写代码的问题，因此它对于 SO 来说太宽泛且离题 - 如果这是关于您的代码的问题工作，那么它是题外话，因为您需要显示在minimal reproducible example 中不起作用的代码。无论哪种方式，您的问题在当前形式下都不是主题，这就是您获得密切投票的原因

【解决方案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>

【讨论】：