单行文字溢出显示省略号需同时设置 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 结构很简单：
<div class="ellipsis">这是一段很长的文字，超出容器就会显示省略号</div>CSS 写法：
立即学习“前端免费学习笔记（深入）”；
.ellipsis {width: 200px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
注意事项和易错点
这些情况会导致省略号失效：
- 父容器未设宽，或子元素是
display: inline（默认）——需确保它是块级或内联块级（如display: 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 补充。
