如何使用CSS实现长文本每6个单词处自动换行

实现方案 #

纯CSS没有原生支持按固定单词数换行的规则，你之前尝试的两个属性功能都和需求不匹配：

• word-break: break-all是用来控制字符级断行，解决长单词/连续字符超出容器的问题，和按单词数换行完全无关
• 设width: 0的方案本质是强制让每个单词因宽度不够被迫换行，自然只会出现每个单词独占一行的效果

方案1：JavaScript处理（适配动态内容，最灵活） #

直接用JS拆分单词，每6个单词插入一个换行符即可，示例代码：

const originalText = "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."
const wordArr = originalText.split(/\s+/);
let formattedArr = [];
for(let i = 0; i < wordArr.length; i += 6) {
  formattedArr.push(wordArr.slice(i, i+6).join(' '))
}
const textElement = document.querySelector('.目标元素的类名')
// 如果需要纯文本换行用innerText，需要HTML结构换行就把\n换成<br>后用innerHTML赋值
textElement.innerText = formattedArr.join('\n')

如果用Vue、React这类前端框架，在渲染文本环节按上面的逻辑处理即可。

方案2：纯CSS实现（仅适配固定内容场景） #

提前手动给每6个单词套一层块级标签，再给标签加独占一行的样式：

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

.text-box span {
  display: block;
}

内容的提问来源于stack exchange，提问作者Rick