text-overflow: ellipsis生效必须同时满足四个条件：明确宽度（width/max-width）、white-space: nowrap、overflow: hidden、元素为块级或可约束宽度的内联元素（如display: inline-block）；span默认inline不响应宽度，故需显式设置display并加min-width: 0（若在flex中）。
text-overflow: ellipsis 要生效，必须同时满足四个条件：容器有明确宽度（width 或 max-width）、white-space: nowrap、overflow: hidden、元素为块级或可约束宽度的内联元素（如 display: inline-block）。漏掉任意一个，省略号都不会出现。
为什么 <span> 加了 text-overflow: ellipsis 还是不显示省略号？
<span> 默认是 display: inline，无法响应 width 和 max-width，所以即使写了所有样式，也根本不会触发截断逻辑。
- 必须显式设置
display: inline-block或display: block - 若在
flex容器中，还需加min-width: 0防止 flex item 主动撑宽 - 别用
flex: 1代替宽度约束——它不提供“截断触发点”，text-overflow会静默失效 - 示例正确写法：
.ellipsis-span {<br> display: inline-block;<br> max-width: 200px;<br> white-space: nowrap;<br> overflow: hidden;<br> text-overflow: ellipsis;<br>}
<p> 和 <div> 做单行省略时要注意什么？
它们默认是块级元素，但仍有几个隐藏陷阱：
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
-
<p>有默认margin，可能干扰父容器高度计算，导致视觉错位；建议重置margin: 0 - 若父容器是
display: table-cell（比如<td>），必须给<table>加table-layout: fixed，否则列宽由内容决定，overflow: hidden形同虚设 - 在响应式布局中，
max-width: 100%不一定可靠——如果父容器没设宽，100%会退化为auto；更稳妥的是用max-width: min(300px, 80vw) - 字体变化会影响临界像素点：同一段 CSS，
font-size: 14px可能显示省略号，换成16px就溢出整行，实测比推导更准
中文和英文混排时，省略号截断位置为什么不准？
根本原因是换行行为不同：white-space: nowrap 对中文是“按字断”，对英文是“按词断”。一个长 URL 或无空格英文单词（如 https://example.com/very-long-path）会顶满整行，导致省略号出现在行尾而非词尾。
立即学习“前端免费学习笔记（深入）”；
- 想让英文也能在合适位置截断，可加
word-break: break-all（粗暴按字符断）或overflow-wrap: break-word（优先在单词内断） - 但注意：
break-all会破坏可读性，break-word在窄容器中仍可能整词溢出 - 服务端预处理更可控：按字节数或 Unicode 字符数截断 + 手动补
…，避免前端样式失效导致关键信息全量暴露 -
title属性是低成本兜底：<p title="完整文本">截断文本…</p>，鼠标悬停可见，部分读屏器也会读取
最常被忽略的不是“怎么写”，而是“谁在控制宽度”——flex、table、inline 这三类上下文会各自覆盖宽度继承规则，必须针对性加约束，否则所有 text-overflow 都只是摆设。
