如何设置软连字符(­)换行优先级：优先空格处换行

核心思路 #

要实现优先在空格处换行，仅当宽度不足以容纳空格拆分后的内容时才使用软连字符，需要结合CSS的断字控制属性，保留正常空格的换行优先级。

具体实现代码 #

CSS 调整 #

p {
  background-color: #cfe8ff;
  /* 仅使用手动添加的软连字符位置断字 */
  hyphens: manual;
  /* 确保空格作为默认换行分隔点 */
  white-space: normal;
}
.short {
  width: 80px;
}
.very-short {
  width: 50px;
}

HTML 结构 #

<p>Stack Over&shy;flow</p>
<p class="short">Stack Over&shy;flow</p>
<p class="very-short">Stack Over&shy;flow</p>
<p class="short">Stack Overflow</p>
<p class="very-short">Stack Overflow</p>

原理说明 #

• hyphens: manual：限制浏览器仅在我们明确添加­的位置进行断字，不会自动生成额外连字符。
• 空格的换行优先级默认高于软连字符，因此.short宽度下，浏览器会优先在"Stack"与"Over"之间的空格处换行；当宽度缩小到.very-short的50px时，空格拆分后的内容仍无法容纳，浏览器才会启用­的断字，将"Overflow"拆分为"Over-"和"flow"。

兼容性补充 #

针对部分旧版浏览器，可添加前缀增强兼容性：

p {
  -webkit-hyphens: manual;
  -moz-hyphens: manual;
  hyphens: manual;
}

内容的提问来源于stack exchange，提问作者Michał Perłakowski