本文介绍如何仅用纯 css 实现“只显示长文本的最后一行”，适用于单行高度已知、内容动态但无需换行解析的场景，避免 javascript 重排带来的响应式卡顿。
本文介绍如何仅用纯 css 实现“只显示长文本的最后一行”，适用于单行高度已知、内容动态但无需换行解析的场景，避免 javascript 重排带来的响应式卡顿。
在 Web 开发中，有时需要截断大段纯文本（无换行符 \n），仅展示其视觉上的最后一行（即容器底部可见的那一行），而非首行或中间某行。常见方案如 line-clamp 只能从顶部开始截断并添加省略号，无法反向聚焦末尾；而 JavaScript 动态计算行高+滚动偏移虽可行，却易在窗口缩放时产生闪烁或布局抖动。
所幸，借助 CSS 的定位与伪元素技巧，我们可在不依赖 JS、不修改 HTML 结构、完全响应式的前提下实现该效果。核心思路是：
- 利用 position: absolute 将文本块锚定在容器底部；
- 通过伪元素（:after）撑开父容器高度，确保其具备可计算的 line-height 基准；
- 隐藏伪元素内容，仅保留其占位作用；
- 设置 inset: auto 0 0 0（等价于 top: auto; right: 0; bottom: 0; left: 0），使绝对定位文本自动贴底对齐。
以下是完整、可直接复用的代码示例：
<div class="text-wrapper"> <div class="text">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div> </div>
.text-wrapper {
width: 300px; /* 容器宽度（可设为百分比或响应式单位） */
height: 1.4em; /* 必须显式设置高度 = line-height × 1 行，否则 absolute 元素可能塌陷 */
overflow: hidden;
position: relative;
line-height: 1.4; /* 关键：定义单行高度基准 */
}
/* 伪元素用于撑高容器，确保 line-height 生效且高度可预测 */
.text-wrapper::after {
content: " ";
display: block;
visibility: hidden;
height: 1.4em; /* 与 line-height 一致，更稳妥（部分浏览器需显式 height） */
}
.text {
position: absolute;
inset: auto 0 0 0; /* 等效于 top: auto; bottom: 0; left: 0; right: 0 */
margin: 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis; /* 可选：末尾加省略号增强语义 */
}✅ 优势说明：
立即学习“前端免费学习笔记（深入）”；
- 零 JS、纯 CSS：无事件监听、无 DOM 查询，性能极致轻量；
- 真响应式：宽度变化时，文本自动重新贴底换行（因 white-space: nowrap 被移除后会自然折行，若需强制单行请保留；若允许多行仅取最后一行，建议改用 white-space: normal + text-align: left）；
- 兼容性良好：inset 是 top/right/bottom/left 的现代简写（Chrome 87+/Firefox 63+/Safari 14.1+），旧版可回退为 top: auto; bottom: 0; left: 0; right: 0。
⚠️ 注意事项：
- 此方案要求容器高度严格等于一行文本高度（如 1.4em），若需支持多行容器中“仅显示其最后一行”，则需配合 display: flex; flex-direction: column; 与 margin-top: auto 等布局策略，本质已属不同场景；
- line-height 建议使用无单位数值（如 1.4）而非 px/em，以保证缩放与字体变更时的鲁棒性；
- 若文本含内联样式（如 <span>）、富文本或复杂排版，该方法可能失效，此时应转向 canvas 渲染或 ResizeObserver + getBoundingClientRect() 的 JS 方案。
总结：当需求明确为「单行高度已知、纯文本、仅需视觉末行」时，上述 CSS 技巧是简洁、高效、优雅的首选解法——它把“截断逻辑”交还给渲染引擎，让样式真正成为表现层的终极语言。
