css单行文字省略号怎么实现_利用text overflow ellipsis

单行文字溢出显示省略号需同时设置 width（或max-width）、white-space: nowrap、overflow: hidden、text-overflow: ellipsis 四个属性；缺一不可，且元素须为块级或inline-block。

单行文字超出容器宽度时显示省略号，核心是三个 CSS 属性配合使用：必须设置 width（或 max-width）、white-space: nowrap、overflow: hidden，再加 text-overflow: ellipsis。

必备的四个 CSS 属性

缺一不可，否则省略号不会生效：

• width 或 max-width：给元素设定明确的宽度限制（比如 width: 200px），否则元素会自动撑开，没有“溢出”可言；
• white-space: nowrap：强制文本不换行，让所有文字挤在一行内；
• overflow: hidden：隐藏超出宽度假想区域的内容；
• text-overflow: ellipsis：在被截断的位置显示省略号（…）。

常见写法示例

HTML 结构很简单：

这是一段很长的文字，超出容器就会显示省略号

CSS 写法：

.ellipsis {
  width: 200px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

注意事项和易错点

这些情况会导致省略号失效：

• 父容器未设宽，或子元素是 display: inline（默认）——需确保它是块级或内联块级（如 dis

  

  play: inline-block）；
• 用了 flex 布局但没限制主轴尺寸，比如 flex: 1 的子项仍需配合 min-width: 0 或 overflow: hidden 防止 flex 伸展破坏截断；
• 中文下如果用了 word-break: break-all 或 overflow-wrap: break-word，可能提前换行，干扰单行逻辑；
• text-overflow 只对 block 或 inline-block 元素生效，对纯 inline 元素无效（如 span 默认状态）。

兼容性说明

现代浏览器（Chrome、Firefox、Safari、Edge）均原生支持 text-overflow: ellipsis。IE10+ 也完全支持。无需前缀，也不需要 JavaScript 补充。