CSS inline-block元素内­软换行失效导致文本跳行如何解决？

问题根因 #

浏览器计算inline-block元素的宽度时，默认会将­（软连字符）视为普通不可见字符，不会提前按断行后的宽度计算元素尺寸，所以会按整段文本无断行的总宽度来分配空间，导致整个inline-block容器被挤到新行。

可行调整方案 #

方案1：开启CSS断字规则+限制行内块宽度

直接给inline-block元素添加断字属性，同时指定最大宽度，让浏览器提前按断行规则计算元素宽度：

<div style="width: 180px;">
  <span>1️</span>
  <span style="display: inline-block; vertical-align:top; max-width: 150px; hyphens: auto;">
  Lorem ip&shy;sum do&shy;lor sit amet
  </span>
</div>

注：hyphens: auto会自动识别软连字符位置进行断行，断行位置会自动显示连字符-，max-width的值可以根据1️所占的宽度自行调整，只要总和不超过外层180px即可。

方案2：兼容旧浏览器的简化方案

如果需要兼容不支持hyphens属性的旧浏览器，可以改用行内布局替代inline-block，行内元素本身就支持软连字符断行，同时可以保留垂直对齐设置：

<div style="width: 180px;">
  <span style="vertical-align:top;">1️</span>
  <span style="vertical-align:top;">
  Lorem ip&shy;sum do&shy;lor sit amet
  </span>
</div>

这个方案不需要额外的断行属性，软连字符会直接生效，实现你要的「1️与断行前文本同行、剩余文本换行加连字符」的效果。

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