必须设置 table-layout: fixed，否则 text-overflow: ellipsis 无效；再配合 white-space: nowrap、overflow: hidden、max-width 四属性缺一不可。
表格单元格文字截断不能只靠，否则大概率失效——根本原因是表格默认的自动布局机制会撑开列宽，让失去作用条件。
为什么直接给
加
没反应？
常见错误现象：加了
、
、
，但文字依然换行或把表格撑得变形。
要求元素有「明确宽度限制」+「
不是
」，而默认
的
会让浏览器动态计算列宽，
实际没有生效的宽度约束
是表格单元格，不是普通块级元素，它的尺寸受父级
和同行其他单元格影响，单纯设
常被忽略
即使设了
，若没配合
，浏览器仍可能优先按内容伸缩列宽
必须加
才能生效
这是最关键的一步。不加它，其他样式大概率白配。
让表格按列定义的宽度（如
宽度、
/
的
或
）来分配列宽，不再被内容反向撑开
建议在
上统一设置：
之后再给
或
设置具体宽度约束，比如
或
（推荐后者，更灵活）
的完整省略样式怎么写？
四个属性缺一不可，顺序无关，但必须同时存在：
使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
下载
立即学习
“
前端免费学习笔记（深入）
”；
强制单行，这是
的前提
必须是非
值，
或
也行，但视觉上通常选
只对单行有效；多行要用
，且不兼容 Firefox
如果某列需要响应式宽度，可用
或配合媒体查询调整
值
鼠标悬停显示完整内容，怎么加
？
纯 CSS 截断后，用户看不到原文。补上
是最轻量的方案，但要注意 DOM 层面是否已存在。
如果表格数据是服务端渲染或静态 HTML，直接在
上写：
如果是 JS 动态生成，记得在插入时同步设置：
避免用
直接拼接字符串设
，防止 XSS；优先用
或
注意：Excel 导出等场景中，
不会被导出，如需导出完整内容，得另存原始数据字段
真正容易被忽略的是
这一行——很多人试了十几种 CSS 组合，就是忘了它。一旦漏掉，后面所有样式都在对抗浏览器默认行为，注定失败。
overflow: hiddentext-overflow: ellipsistdtext-overflow: ellipsiswhite-space: nowrapoverflow: hiddentext-overflow: ellipsistext-overflowoverflowvisibletabletable-layout: autotdtdtablemax-widthwidthtable-layout: fixedtable-layout: fixedtable-layout: fixedcolthtdwidthmax-widthtabletable { table-layout: fixed; width: 100%; }tdthwidth: 120pxmax-width: 150pxtdtd, th {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 150px; /* 必须有明确宽度限制 */
}white-space: nowraptext-overflow: ellipsisoverflow: hiddenvisiblescrollautohiddentext-overflow: ellipsis-webkit-line-clampmax-width: 20vwmax-widthtitletitletd截断文本 cell.setAttribute('title', fullText)innerHTMLtitletextContentsetAttributetitletable-layout: fixed