`text-overflow: ellipsis` 仅对纯文本生效，当 `.element` 内含 ``、`
` 等块级或行内 html 元素时，默认无法整体截断。解决方案是将 `white-space: nowrap`、`overflow: hidden` 和 `text-overflow: ellipsis` 同时应用于容器及其**所有内联级子元素**（如 `span`、`em`），并对块级子元素（如 `div`）强制设为 `display: inline` 或 `inline-block`，确保其参与同一行内格式化上下文。
text-overflow: ellipsis 是一个常被误解的 css 属性：它本身不触发截断，而只是定义截断发生时的视觉表现（即显示省略号）。真正实现“单行截断”的三要素缺一不可：
- white-space: nowrap —— 阻止换行，强制内容在一行内展开；
- overflow: hidden —— 隐藏溢出部分；
- text-overflow: ellipsis —— 在溢出末端渲染 …。
但关键限制在于：该机制仅适用于“行内格式化上下文”（inline formatting context）中的连续文本流。一旦子元素是 div（默认 display: block），它会创建新的块级上下文，打断文本流，导致父容器的 ellipsis 失效。
✅ 正确做法不是仅给 .element 设置样式，而是统一规范所有子内容的显示行为：
.element { font-family: monospace; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; /* 确保自身为行内级容器（可选，但推荐） */ display: inline-block; max-width: 50px; /* 替代 width，更利于响应式 */ } /* 关键：将所有子元素（span/div/button等）转为行内行为 */ .element > * { display: inline; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; vertical-align: bottom; /* 避免基线对齐导致高度异常 */ } /* 特殊处理：若需保留某些子元素语义结构（如 button），可单独微调 */ .element button { display: inline-block; padding: 0 4px; margin: 0; border: none; background: #eee; font-family: inherit; }⚠️ 注意事项：
立即学习“前端免费学习笔记（深入）”；
- 不要对 .element 使用 display: flex 并期望 ellipsis 生效——Flex 容器会忽略 white-space 和 text-overflow，此时应改用 flex-wrap: nowrap + min-width: 0 + overflow: hidden 配合子项 text-overflow；
- display: inline 会丢失块级元素的默认间距和盒模型特性，若需保留内边距/外边距，改用 display: inline-block 并设置 vertical-align；
- 若内容含
或换行符，需先用 white-space: pre 或 js 清理，否则 nowrap 无效； - 浏览器兼容性良好（chrome 1+, firefox 7+, safari 3.1+, edge 12+），但 IE 对嵌套 ellipsis 支持不稳定，建议降级为纯文本 fallback。
? 总结：ellipsis 不是“魔法截断器”，而是“行内文本溢出修饰器”。要让含 html 的内容支持省略号，本质是将整个子树扁平化为单行内联流。通过组合 display: inline、white-space: nowrap 和层级化的 overflow 控制，即可在保持语义结构的同时，实现可靠、可维护的截断效果。