text-overflow: ellipsis 实现单行文本优雅截断需同时设置 white-space: nowrap、overflow: hidden 和明确宽度；多行截断需用 -webkit-line-clamp、JS 或服务端处理。

标题太长时默认换行，容易破坏整体排版节奏，尤其在卡片、导航栏或列表项中。如果设计要求单行显示并优雅截断，text-overflow: ellipsis 是最直接有效的方案——但必须配合 white-space: nowrap 和 overflow: hidden 才能生效。

确保三要素同时存在

仅写 text-overflow: ellipsis 是无效的。它需要三个CSS属性协同作用：

• white-space: nowrap：禁止文本换行，强制保持单行
• overflow: hidden：隐藏超出容器的部分（否则省略号不出现）
• text-overflow: ellipsis：指定用省略号（…）替代被截断内容

容器必须有明确宽度

上述三属性生效的前提是元素有**可计算的宽度**。常见问题就是父容器没设宽（如 div 默认 width: auto），导致浏览器无法判断“哪里该截断”。解决方式包括：

jm-jsjkxyjs02-zlm-405

使用约定式提交（Conventional Commits）生成标准化的 Git 提交信息。适用于以下场景： (1) 暂存更改时需要提交信息； (2) 审查 diff 时希望获得结构化摘要； (3) 编写 PR 描述或变更日志（changelog）条目； (4) 用户明确要求“为本次更改编写提交信息”。 该功能会分析已暂存/未暂存的 diff，并生成按类型（type）划分范围的提交信息。

下载

• 给标题元素自身设置固定宽（如 width: 200px）
• 用 max-width 更灵活，适配响应式场景
• 在 Flex 布局中，给标题加 flex: 1 并配合 min-width: 0 防止伸缩溢出

多行截断？需另寻方案

text-overflow: ellipsis 仅支持单行。若需两行或更多行截断，不能只靠 CSS 基础属性。可行方法有：

• CSS 方案：使用 -webkit-line-clamp（需配合 display: -webkit-box 等，兼容性有限）
• JS 方案：动态截取文字+添加省略号，控制更精准但增加逻辑复杂度
• 服务端截断：提前限制字数，简单可靠，适合标题内容可控的场景

基本上就这些。单行省略不是难事，关键在于别漏掉那三个联动属性，再确认宽度有约束——不复杂但容易忽略。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！