iOS端Safari文本溢出时不显示省略号的问题求助

给定代码如下：

span {
  display: inline-block;
  overflow: hidden;
  text-overflow: ellipsis !important;
  white-space: nowrap;
  vertical-align: bottom;
  width: 50px;
}

<p>Hello <span>abcdefghijklmnopqrstuvwxyz</span> World!</p>

桌面端Chrome中，文本溢出时能正常显示省略号，但iOS Safari却无法显示，选中文本可确认内容确实存在溢出，这是iOS Safari的兼容性问题导致的，具体原因和解决方法如下：

原因分析 #

iOS Safari对text-overflow: ellipsis的生效条件比Chrome更严苛：

• 当inline-block元素嵌套在块级父元素（如这里的<p>）中时，若父元素未明确设置white-space属性，Safari可能无法正确识别子元素的文本溢出状态
• 仅设置width有时不足以让Safari触发溢出规则，它对元素的尺寸计算逻辑和Chrome存在差异

解决方法 #

可以尝试以下几种有效方案：

方案1：给父元素添加white-space: nowrap #

强制父元素不自动换行，确保子元素的溢出规则能被正确触发：

p {
  white-space: nowrap;
}
span {
  display: inline-block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: bottom;
  width: 50px;
}

方案2：用max-width替代或配合width #

给子元素添加max-width，增强Safari对元素尺寸限制的识别：

span {
  display: inline-block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: bottom;
  width: 50px;
  max-width: 50px;
}

方案3：添加word-break: keep-all #

强制文本保持连续不拆分，避免Safari因文本换行逻辑忽略溢出规则：

span {
  display: inline-block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: bottom;
  width: 50px;
  word-break: keep-all;
}

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