line-clamp是目前最直接、最可控的多行文本截断方案，但仅对块级元素有效，需配合display: -webkit-box、-webkit-line-clamp: N和-webkit-box-orient: vertical，且容器须有明确宽度。
line-clamp 是目前最直接、最可控的方案，但只对块级元素（如 <div>、<p>）有效，不能用于 <textarea> 或内联元素。
用 line-clamp 截断多行文本（适合静态/只读内容）
这是现代浏览器（Chrome 63+、Firefox 68+、Safari 10.1+）原生支持的 CSS 方案，能干净地限制显示行数并加省略号。
- 必须配合三个声明：
display: -webkit-box、-webkit-line-clamp: N、-webkit-box-orient: vertical；Firefox 还需加display: block和overflow: hidden -
N是你要显示的最大行数，比如-webkit-line-clamp: 2表示最多两行 - 容器需有明确宽度（
width或max-width），否则无法触发截断 - 若文字含中文或中英混排，确保
font-size和line-height合理，否则省略号可能错位或被裁切
<p style="width: 300px; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;"> 这是一段可能很长的中文文本，超出两行就会被截断并显示省略号。 </p>
用 max-height + overflow-y: auto 实现可滚动多行（适合用户可编辑内容）
当内容需要用户阅读更多、且允许滚动时，max-height 比 line-clamp 更可靠，尤其在 <textarea> 或动态渲染场景中。
-
max-height值建议按font-size × line-height × 行数计算，例如16px × 1.5 × 3 = 72px - 务必加
overflow-y: auto（不是scroll），避免空滚动条干扰视觉 - 对
<textarea>，rows属性只影响初始高度，最终高度由 CSS 的height或max-height决定 - 如果用了
padding，记得把它纳入高度计算，否则实际可视行数会少 0.5 行
别误用 rows 属性去限制显示行数
rows 是 <textarea> 的 HTML 属性，它只控制“初始可见行数”，既不阻止用户输入更多行，也不限制最终渲染高度。
立即学习“前端免费学习笔记（深入）”；
- CSS 的
height、max-height会覆盖rows的效果 - 用户仍可拖拽调整大小，或通过回车不断换行，
rows="3"不等于“最多三行” - 真要限制输入行数，得用 JavaScript 监听
input事件，检查value.split('\n').length是否超限 - 截断后记得调用
textarea.scrollTop = 0，否则光标可能卡在底部，用户看不到自己刚输的内容
white-space: pre-line 不是行数控制方案，而是换行符解析开关
它让 HTML 元素内的换行符（\n）生效，但不会限制总行数——只是把源码里的回车转成真实换行。
- 适合从后端返回带换行符的纯文本，想保持段落结构但又不想用一堆
<p> - 它和
line-clamp可共存，但要注意：如果文本里换行太多，line-clamp仍按视觉行数截断，不是按源码换行数 - 别用
white-space: pre，它会保留所有空格和换行，极易导致文本溢出容器
真正难的不是写哪几行 CSS，而是分清「内容是否可编辑」「是否需要省略号」「是否要兼容老浏览器」——这三个条件一变，方案就得换。比如 iOS Safari 10.3 以下不支持 line-clamp，就得回退到 JS 计算高度 + max-height，而这个计算本身又依赖 getComputedStyle 返回的 lineHeight 是否为 "normal"。
