HTML表格如何实现内容过长时显示省略号（代码分享）-html教程-PHP中文网

table-layout: fixed 是前提，否则 width 不生效；需配合 table 明确宽度、列元素设置 width/max-width、white-space: nowrap、overflow: hidden、text-overflow: ellipsis 及 display: block 才能实现精准列宽与文本省略；title 属性可实现 hover 提示，但移动端需 js 补充；响应式推荐 vw 单位或媒体查询调整 max-width。

html表格如何实现内容过长时显示省略号（代码分享）

table-layout: fixed 是前提，否则 width 不生效

表格默认用 table-layout: auto，列宽由内容撑开，哪怕你给 <th> 或 <code><td> 设置了 <code>width 或 max-width，也大概率被忽略。必须显式声明 table { table-layout: fixed; }，才能让列宽真正受控。

注意两点：

table 必须有明确宽度（如 width: 100% 或具体像素值），否则 fixed 模式下各列会按比例均分，无法精准控制某列
列宽建议设在 <th> 上（或带 class 的 <code><td>），它会作用于整列；只设 <code><td> 可能因行数多而失效 <li>如果用了 Bootstrap 的栅格类（如 <code>col-md-3），它们不直接控制表格列宽，仍需配合 table-layout: fixed

td/th 必须同时满足四个条件才显示 ellipsis

光写 text-overflow: ellipsis 不起作用。它依赖三个配套属性共存，且元素需有“可截断”的上下文：

white-space: nowrap：强制单行，否则换行就不存在“溢出”
overflow: hidden：隐藏超出部分，text-overflow 才有机会渲染省略号
width 或 max-width：必须有明确尺寸限制，text-overflow 才知道在哪截断
display: block 或 inline-block 更可靠 —— <td> 默认是 <code>table-cell，某些旧浏览器对 table-cell 的 text-overflow 支持不稳定，加 display: block 可规避
典型写法：

Wechat HTML Publisher
直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。

下载
```
td, th {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 200px;
  display: block;
}
```
鼠标悬停显示完整内容，用 title 最轻量

不需要 JS 就能实现 hover 查看全量文本，直接利用原生 title 属性：
- HTML 中每个 <td> 加 <code>title="完整文本"，浏览器自动触发 tooltip
- 如果文本来自后端或模板引擎（如 Thymeleaf、Vue），确保 title 和显示内容一致，例如：<td :title="item.desc">{{ item.desc | truncate(25) }}</td>
- 注意：移动端 touch 设备上 title 不触发，如需兼容，得用 JS 监听 touchstart 或弹层
- 避免重复设置 title 导致双 tooltip（比如既用 CSS ::after 又用 HTML title）