在网页排版中，经常遇到标题或描述文本过长需要限制在一行内，末尾以省略号表示截断的需求。HTML本身不提供直接省略标签，必须配合CSS才能实现。核心思路是通过限制容器宽度、禁止换行、隐藏溢出内容，并声明溢出时显示省略号。
一、实现单行省略的基础CSS方案
要让HTML中的文本在超出一行时显示省略号，必须同时满足三个CSS条件。第一是设置容器的宽度，可以是固定像素值，也可以是百分比，但必须有约束；第二是使用white-space: nowrap让文本不换行；第三是overflow: hidden隐藏超出部分，最后用text-overflow: ellipsis将溢出文本变为省略号。
这三个属性缺一不可。如果只写text-overflow: ellipsis而没有overflow: hidden和white-space: nowrap，浏览器不会做任何截断。下面是一段标准写法，适用于大多数块级元素如<div>或<p>。
.single-line {
width: 200px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
将上述样式应用到HTML节点上，例如<p class="single-line">这是一段非常长的文本内容用来测试单行省略效果</p>，当文字宽度超过200px时，末尾就会出现省略号。这种方案兼容性好，从IE6开始就支持，是日常项目里最稳定的做法。
二、内联元素与Flex布局下的注意事项
很多开发者在<span>这类内联元素上直接加省略号样式却发现无效，这是因为内联元素默认宽度由内容决定，width和overflow不起作用。解决办法是将元素转为display: inline-block或display: block，再设定宽度。
在Flex布局中，子项常常因flex: 1获得弹性宽度，此时若想省略号生效，需要补充min-width: 0。Flex项默认最小宽度是内容宽度，不设置min-width会导致文本把容器撑开，省略号永远不出现。示例代码如下：
.flex-item {
flex: 1;
min-width: 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
这段样式通常写在Flex容器的直接子元素上。配合如下HTML结构就能稳定运行：<div class="flex-box"><div class="flex-item">很长的 flex 子项文本</div></div>。注意父容器也要有界定宽度，否则整体布局可能溢出屏幕。
三、使用table-cell场景的特殊处理
当文本位于表格单元格<td>内且使用display: table-cell时，省略号同样可能失效。表格布局默认会按内容撑开列宽，需要给表格设定table-layout: fixed，并为单元格指定宽度，溢出规则才会按照预期工作。
参考下面这段组合样式，它保证了表格内单行文本的截断：
table {
table-layout: fixed;
width: 100%;
}
td {
width: 120px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
在HTML里写成<table><tr><td>超长表格内容示例文本</td></tr></table>即可。如果不加table-layout: fixed，浏览器自动列宽算法会忽略单元格的width设定，省略号便无法触发。这是后台管理系统表格列经常踩的坑。
四、常见问题与排查思路
实际开发中省略号不显示，通常源于样式被覆盖。例如全局reset里写了white-space: normal，或引入了UI框架后优先级更高。用浏览器审查元素查看computed面板，确认那三个属性是否真实生效，是最快的排查方式。
另一个误区是以为HTML属性如<title>或输入框的placeholder能用同样方式省略。输入框本身不换行，溢出由浏览器自身处理，不能加省略号；若想模拟，要用外层容器包裹并做宽度同步。总之，单行省略本质是CSS渲染控制，理解依赖关系才能避免反复调试。
htmltext-overflowCSS_ellipsis修改时间：2026-08-05 16:12:47