CSS换行问题：阻止单词在换行时撑满整行

兄弟，我太懂你这个困扰了——明明想让单词尽量凑在一行，实在塞不下才换行，结果换了行的单词直接撑满整个容器宽度，丑得一批对吧？我来给你捋捋问题和解决方案。

首先，先说说你当前代码的小问题：你用inline-flex加row-wrap其实有点画蛇添足了，而且overflow-wrap: anywhere会允许单词内部被拆分换行，这肯定不是你要的效果。另外如果你的父容器设置了text-align: justify，那换行后的文本会被强制拉伸撑满容器宽度，这应该就是你要解决的“撑满整行”的核心问题。

给你两个针对性的解决方案，按需选：

方案一：不用Flex，纯文本属性搞定（推荐） #

如果你的核心需求就是“单词尽量不拆分，换行时只在单词之间断行，且换行后的单词不撑满容器”，那完全不需要Flex布局，几行简单的CSS就能搞定：

.keep-together {
  display: inline; /* 保持行内元素特性，跟着文本流走 */
  white-space: pre-wrap; /* 保留单词间的空格，只在单词边界换行 */
  overflow-wrap: normal; /* 禁止单词内部被拆分换行 */
  background-color: #ffd700; /* 保留你的可视化辅助色 */
}

然后务必检查父容器，如果父容器有text-align: justify，要么去掉这个属性，要么给.keep-together单独设置text-align: left（或者你想要的对齐方式），这样换行后的单词就只会占自己内容的宽度，不会强行撑满容器了。

方案二：如果一定要用Flex布局（比如有其他布局需求） #

如果你因为其他布局原因必须用Flex，那需要调整Flex的属性，避免换行后的内容被拉伸：

.keep-together {
  display: inline-flex;
  flex-flow: row wrap;
  align-items: flex-start; /* 确保内容不被垂直拉伸 */
  justify-content: flex-start; /* 内容左对齐，不撑满容器 */
  flex-shrink: 0; /* 禁止Flex容器被压缩 */
  background-color: #ffd700;
  overflow-wrap: normal; /* 把之前的anywhere改成normal，禁止单词内部拆分 */
}

这里关键是justify-content: flex-start（默认其实就是这个，但如果被继承了其他值就需要手动设置），还有把overflow-wrap: anywhere改成normal，保证单词不会被拆碎。

最后给你补个完整的测试HTML，你可以直接跑起来看效果：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Responsive Text Wrapping Demo</title>
  <style>
    /* 模拟可能的父容器样式，这里故意加了justify来测试 */
    .container {
      width: 150px;
      border: 1px solid #ccc;
      /* 这行是导致单词撑满的罪魁祸首，测试时可以开/关看效果 */
      text-align: justify;
    }

    .keep-together {
      display: inline;
      white-space: pre-wrap;
      overflow-wrap: normal;
      background-color: #ffd700;
      /* 如果父容器有justify，加这行强制左对齐 */
      text-align: left;
    }
  </style>
</head>
<body>
  <div class="container">
    这是一段测试文本，<span class="keep-together">我是要保持在一起的多个单词 不能随便拆分也不能撑满整行</span>，看看换行效果对不对。
  </div>
</body>
</html>

你可以调整容器的宽度，看看不同宽度下的换行效果——单词会尽量凑在同一行，实在塞不下才换行，而且换行后的单词只会占自己的宽度，不会强行撑满整个容器啦！

备注：内容来源于stack exchange，提问作者Sotiris