line-clamp-3 是 Tailwind v3.3+ 官方支持但默认禁用的实用类，需在 tailwind.config.js 中手动启用 lineClamp 扩展，并仅在 WebKit 内核浏览器生效，依赖 overflow-hidden、display: -webkit-box 和 -webkit-box-orient: vertical 三者协同。
line-clamp-3 不是插件，是 Tailwind 官方已支持的实用类（v3.3+），但直接写 line-clamp-3 无效——因为默认被禁用，且依赖 CSS -webkit-line-clamp，只在部分浏览器生效。
为什么 line-clamp-3 写了没反应
Tailwind 默认不启用 line-clamp 类，需手动在 tailwind.config.js 中开启；同时该属性仅被 WebKit 内核浏览器（Chrome、Safari、Edge）支持，Firefox 完全不识别 -webkit-line-clamp。
- 检查配置：确保
theme.extend.extend.lineClamp或plugins: [require('@tailwindcss/line-clamp')]已正确配置（v3.3+ 推荐前者） - 必须搭配
overflow-hidden+display: -webkit-box+-webkit-box-orient: vertical才能生效，Tailwind 的line-clamp-3会自动补全这三者 - 若父容器有
flex或grid布局，line-clamp可能失效——它要求元素是块级流式布局
如何正确启用并使用 line-clamp
不用装额外插件（除非你用的是旧版 Tailwind），v3.3+ 只需修改配置并重启构建工具。
- 在
tailwind.config.js的theme.extend下添加：lineClamp: { 1: '1', 2: '2', 3: '3', 4: '4', 5: '5', } - 确保
content配置已包含所有用到line-clamp的模板文件，否则类不会被生成 - HTML 中直接使用：
<p class="line-clamp-3 overflow-hidden">…</p>（overflow-hidden建议显式写上，避免被 PurgeCSS 误删）
Firefox 下怎么让多行截断也工作
没有纯 CSS 方案。Firefox 不支持 -webkit-line-clamp，也不能用 text-overflow: ellipsis 处理多行。
立即学习“前端免费学习笔记（深入）”；
- 服务端或构建时截断：用 JS 或模板引擎提前计算字符数/字节数，再截断 + 加省略号（适合静态内容）
- 客户端 JS 补偿：监听
resize和渲染完成，用getBoundingClientRect()或offsetHeight判断是否溢出，再手动截断文本（注意 SSR 不可用） - 接受降级：Firefox 用户看到完整内容，不截断——对多数产品已是可接受折中
line-clamp 影响性能和可访问性吗
本身无运行时开销，但容易引发两个隐性问题：
- 屏幕阅读器可能读出被 CSS 隐藏的文本（虽然视觉上截断了），建议加
aria-label或用visually-hidden类提供摘要 - 动态内容（如 i18n 多语言）可能导致行高变化，使截断行数不稳定——测试时务必覆盖不同语言的最长文案
- 不要对
button或带交互的div用line-clamp，焦点状态或 hover 可能因截断导致视觉异常
真正麻烦的不是怎么写 line-clamp-3，而是得时刻想着：它在 Firefox 里不存在，它在 flex 容器里大概率罢工，它对屏幕阅读器不够诚实——这些边界情况比语法本身更消耗调试时间。
