text-overflow: ellipsis仅对块级元素生效，需同时设置overflow: hidden、white-space: nowrap和width/max-width；多行省略依赖-webkit-line-clamp并注意可访问性；js截断易破坏语义，应优先用css方案并保留完整文本。
text-overflow: ellipsis 只对块级元素生效
直接给 <span></span> 或内联元素加 text-overflow: ellipsis 不会生效，这是最常被忽略的前提。它必须配合三个 CSS 属性同时使用：overflow: hidden、white-space: nowrap（或 pre 类值）、width（或 max-width）且容器为块级或设为 display: block。
常见错误是只写 text-overflow: ellipsis，或者用在未设宽度的 <div> 上——此时浏览器根本不知道“该在哪截”，自然不显示省略号。
<ul>
<li>必须显式设置宽度，比如 <code>width: 200px 或 max-width: 100%
flex-basis 或 min-width 不为 auto，否则宽度计算失效display: inline 元素——哪怕加了 display: block，也要确认它没被其他样式（如 float、position: absolute）干扰盒模型多行省略要用 -webkit-line-clamp，但语义仍需保留
纯 CSS 多行省略（如两行后显示 …）目前只能靠 -webkit-line-clamp，它虽是 WebKit 私有属性，但已广泛支持 Chrome、Safari、Edge（Chromium 内核），Firefox 仍不支持。关键在于：它本身不破坏语义，但实现方式容易误伤可访问性。
典型写法是用 display: -webkit-box + -webkit-box-orient: vertical，但这会让元素脱离标准流布局，且屏幕阅读器可能无法正确读出截断后的完整文本。
- 务必保留原始文本内容，不要用 JS 截断后塞进 DOM——否则 AT 工具读不到全量信息
- 可配合
aria-label或title属性提供完整文本，例如：<p aria-label="这是一段很长的说明文字，用于展示多行省略效果">这是一段很长的说明文字…</p> - Firefox 用户需降级方案：用 JS 计算字符数或高度截断，并动态插入
<span class="ellipsis">…</span>，但要确保aria-hidden="true"仅作用于省略号本身
避免用 JS 手动截字符串破坏语义和换行逻辑
很多人用 str.substring(0, n) + '…' 实现省略，看似简单，实则问题集中：中文可能在字中间截断、英文单词被硬拆、HTML 标签被当普通文本截断、响应式下固定字符数完全不可靠。
更糟的是，这种做法把原本结构化的文本（比如含 <strong></strong> 或链接的段落）变成纯字符串，丢失所有语义节点和交互能力。
- 永远不要对含 HTML 的字符串做
substring——先用textContent提取纯文本再处理，或用 DOM 方法遍历文本节点 - 字符数限制必须结合字体宽度估算，而非固定值；中英文混排时，
ch单位比px更可靠，但仍有偏差 - 如果必须用 JS 控制，优先用
getBoundingClientRect()测量实际渲染宽度，再反向裁剪，而不是预设长度
响应式场景下 width 和 line-clamp 需动态适配
移动端视口变化频繁，固定 width: 200px 或 -webkit-line-clamp: 2 很快失效。但媒体查询不能覆盖所有设备密度和缩放比例，单纯靠 CSS 有局限。
真正健壮的做法是：CSS 控制基础表现，JS 监听 resize 或 fontload 后微调——但调整目标不是重写文本，而是更新容器尺寸约束或重新触发 line-clamp 计算。
- 用
clamp(100px, 50vw, 300px)替代固定width，让容器宽度随视口弹性变化 -
-webkit-line-clamp值可通过style.setProperty('--lines', '3')动态写入 CSS 变量，再在 CSS 中引用：-webkit-line-clamp: var(--lines); - 注意字体加载完成前，
line-height和font-size可能未就绪，导致行高计算错误——可监听document.fonts.ready再执行尺寸校准
