无需登录 数据私有 本地保存

展开/收起文本截断生成器 - 行数限制CSS

12
0
0
0
配置参数
1行10行
快速填充预设文本
📝 长文本 📄 中等文本 📋 短文本 🎋 中文诗词
实时预览
调整行数或修改文本后，预览将自动重置为截断状态。按钮仅在文本被实际截断时显示。
生成代码
/* 多行文本截断 - 使用 line-clamp */
.text-clamp {
  display: -webkit-box;
  -webkit-line-clamp: 3; /* 限制显示行数 */
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis; /* 可选，增强兼容 */
}

兼容 Chrome / Safari / Edge / Firefox 68+ / 移动端浏览器 

<!-- HTML 结构 -->
<div class="text-clamp-box">
  <p class="clamp-content">你的文本内容...</p>
  <button class="toggle-expand-btn">展开全文</button>
</div>

/* CSS 样式 */
.clamp-content {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.clamp-content.expanded {
  display: block;
  -webkit-line-clamp: unset;
  overflow: visible;
}
.toggle-expand-btn { /* 自定义按钮样式 */ }

// JavaScript 交互
const box = document.querySelector('.clamp-content');
const btn = document.querySelector('.toggle-expand-btn');
const checkTruncation = () => {
  const truncated = box.scrollHeight > box.clientHeight;
  btn.style.display = truncated ? 'inline-block' : 'none';
};
btn.addEventListener('click', () => {
  box.classList.toggle('expanded');
  btn.textContent = box.classList.contains('expanded') ? '收起' : '展开全文';
});
checkTruncation();
window.addEventListener('resize', checkTruncation);
常见问题与知识点

-webkit-line-clamp 是一个 CSS 属性，用于将块级元素的内容限制在指定的行数内，超出部分会被截断并显示省略号（…）。它需要配合 display: -webkit-box 和 -webkit-box-orient: vertical 一起使用。虽然带有 -webkit- 前缀，但现代浏览器（包括 Firefox 68+、Edge、Chrome、Safari）均已支持。它是目前实现多行文本截断最简洁、最优雅的方案，无需计算行高或使用 JavaScript。

line-clamp 方案：基于行数精确截断，自动显示省略号，不依赖行高计算，代码简洁，推荐优先使用。
max-height 方案：通过设置 max-height（如 max-height: calc(1.5em * 3)）配合 overflow: hidden 实现。缺点是省略号需要额外处理（通常使用伪元素 ::after 模拟），且高度计算依赖行高，在不同字体渲染下可能出现截断偏差。适用于需要兼容极老旧浏览器或需要渐变遮罩效果的场景。

使用 JavaScript 比较元素的 scrollHeight 和 clientHeight：
const isTruncated = element.scrollHeight > element.clientHeight;
当 scrollHeight（内容完整高度）大于 clientHeight（可见区域高度）时，说明内容被截断了。这个方法适用于 overflow: hidden 的元素。建议在内容加载完成后、窗口大小改变时进行检测，以决定是否显示"展开"按钮。注意：需要在元素应用截断样式（未展开状态）时进行检测。

兼容性非常好：
✅ Chrome 6+
✅ Safari 5+
✅ Firefox 68+
✅ Edge 79+（基于 Chromium）
✅ iOS Safari 全版本
✅ Android Chrome 全版本
✅ 微信内置浏览器、小程序 WebView
全球覆盖率超过 97%。对于极少数老旧浏览器，可以搭配 max-height 作为降级方案。移动端完全支持，且性能优秀。

line-clamp 默认使用浏览器的省略号（…），无法直接通过 CSS 修改省略号字符。如果需要自定义，可以使用以下变通方案：
1. 伪元素覆盖法：在截断容器末尾使用 ::after 伪元素，设置 content: '...查看更多'，配合绝对定位覆盖默认省略号。但实现复杂，不推荐。
2. JS 截断法：使用 JavaScript 按字符或行数截断文本，手动拼接自定义后缀（如 '... 展开'）。适合需要高度定制化的场景。
3. 接受默认行为：大多数情况下，浏览器的省略号已足够满足需求，保持简洁即可。

可以封装为一个可复用的组件：
React 示例思路：使用 useRef 获取 DOM 引用，useState 管理展开/收起状态，在 useEffect 中检测截断状态并决定是否显示按钮。通过 props 接收 lines（行数）、expandText、collapseText 等参数。
Vue 示例思路：使用 ref 获取元素引用，v-if 或动态 class 控制截断状态，在 onMounted 和 watch 中检测截断。通过 props 传递配置参数。
核心逻辑与本工具生成的 JS 代码一致，可参考"完整 HTML+JS"标签中的代码进行封装。

line-clamp 按行数截断，不依赖行高的具体数值。无论你设置 line-height: 1.5、1.8 还是 24px，截断始终精确发生在第 N 行之后。这使得它比 max-height 方案更加灵活和可靠。需要注意的是，如果 line-height 设置过小导致文字重叠，截断位置的计算仍然准确，但视觉效果可能不佳。建议保持合理的行高（1.4~1.8）以确保可读性。

line-clamp 的切换（展开/收起）本身不支持 CSS transition 动画，因为 -webkit-line-clamp 是离散属性。要实现平滑动画，有以下方案：
1. max-height 过渡：使用 max-height 替代 line-clamp，设置 transition: max-height 0.3s ease，展开时设置一个足够大的 max-height 值。
2. JS + requestAnimationFrame：在展开时先获取完整高度，然后使用 JS 动画从截断高度过渡到完整高度。实现较复杂，但效果最好。
3. 接受无动画：对于大多数应用场景，瞬间切换已经足够，动画并非必需。简洁的交互往往比复杂的动画更受欢迎。

常见原因及排查步骤：
1. 确认三个属性同时存在：display: -webkit-box、-webkit-box-orient: vertical、-webkit-line-clamp: N。
2. 确认元素设置了 overflow: hidden。
3. 检查文本内容是否真的超出了行数限制——如果文本不足 N 行，自然不会显示省略号。
4. 检查是否有其他样式覆盖了这些属性（如 white-space: nowrap 会阻止换行）。
5. 在开发者工具中检查元素的实际行数，确认 scrollHeight > clientHeight。

完全可以。生成的 CSS 代码遵循标准规范，兼容主流浏览器。生成的完整 HTML+JS 代码提供了开箱即用的展开/收起功能，代码结构清晰，可直接嵌入项目中使用。建议根据实际项目的设计系统调整按钮样式和文案。对于需要支持屏幕阅读器（无障碍访问）的场景，可以额外添加 aria-expanded 和 aria-label 属性来提升可访问性。
🔧 相关工具