Div短文本无端换行问题求助：已配置fit-content与max-width

核心问题分析 #

短文本无端换行的原因，大概率是你给div加了强制任意位置换行的样式（比如word-break: break-all），或者white-space属性设置异常，导致浏览器错误拆分了本可以放在同一行的单词。

正确样式代码 #

要实现「短文本自适应宽度、长文本超过150px自动换行」的效果，直接用以下样式组合即可：

.your-div-class {
  max-width: 150px;
  width: fit-content;
  overflow-wrap: break-word; /* 处理超长单词换行，避免溢出 */
  white-space: normal; /* 确保文本遵循正常换行逻辑 */
}

关键说明 #

• max-width: 150px：限制div最大宽度为150px，长文本超出时自动触发换行
• width: fit-content：让div宽度随文本内容自适应，短文本不会强制占满150px
• overflow-wrap: break-word：仅当单个单词长度超过容器宽度时才拆分换行，不会随意拆分正常单词
• 如果你之前设置过word-break: break-all，必须删掉——这个属性会强制在任意字符处换行，哪怕单词完全能放在同一行，这正是短文本无端换行的元凶

内容的提问来源于stack exchange，提问作者fatih.jsx