text-overflow: ellipsis在table中生效需四条件：table-layout: fixed、td设max-width、内层div设white-space: nowrap/overflow: hidden/text-overflow: ellipsis，无空格字符串还需overflow-wrap: break-word。
table 本身不提供行内文字长度限制能力，所谓“限制单行文字长度”，实际要解决的是单元格（td 或 th）中内容溢出、换行或截断的显示问题。这不是表格属性能控制的，得靠 CSS 配合语义化处理。
用 text-overflow: ellipsis 截断单行文本
这是最常用的“视觉上限制单行长度”方案，但有严格前提：
- 元素必须是块级或设为
display: block（td默认是table-cell，需显式改） - 必须设置固定宽度（
width或max-width） - 必须设
white-space: nowrap阻止换行 - 必须设
overflow: hidden
示例：
<td style="width: 120px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">这是一段超长的文字，超出部分会变成省略号</td>
注意：text-overflow 只对单行生效，且不会影响实际字符串长度（cell.textContent.length 不变），纯属显示层控制。
word-break 和 overflow-wrap 控制换行位置
当不想截断、而是希望内容在单元格内自动折行时，这两个属性更实用：
-
word-break: break-all：强行在任意字符间断行（包括中文、英文单词中间），适合紧凑排版但可读性差 -
overflow-wrap: break-word（或旧写法word-wrap: break-word）：优先在单词边界换行，只在必要时才打断长单词或连续无空格字符串（如 URL、base64） - 两者都需配合
width+table-layout: fixed（加在table上）才能稳定生效，否则表格会撑宽
推荐组合：
| https://example.com/very-long-path-with-no-spaces-at-all |
为什么 maxlength 在表格里完全无效
maxlength 是表单控件专属属性，只对 input、textarea 等可编辑元素起作用。表格单元格（td）默认不可编辑，即使加了 contenteditable="true"，maxlength 也不会生效——它不支持 contenteditable 元素。
- 若真要在表格中做输入长度限制，必须把
td改成可编辑状态，并在其内部嵌套input或textarea，再对子元素设maxlength - 直接给
td写maxlength="10"是无效 HTML，浏览器会忽略 - 服务端永远不能依赖前端这种“伪限制”，所有长度校验必须落在真实提交字段上
移动端表格文字截断容易被忽略的细节
在 iOS Safari 或部分安卓 WebView 中，text-overflow: ellipsis 对 table-cell 的兼容性不稳定，尤其当字体缩放开启或使用系统字体时可能失效。
- 稳妥做法：把
td包一层div，样式全加在div上（display: block+text-overflow） - 避免用
ch、em这类相对单位定宽，用px或rem更可控 - 如果业务要求“精确到 N 个字符就截断”，不要依赖 CSS 显示效果，而应在 JS 层用
str.slice(0, N)预处理数据并同步更新 DOM
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
