CSS 文本溢出显示省略号：单行与多行的实现方案

一、单行文本溢出：简洁高效的基础方案

实现代码：

关键属性解析：

• overflow: hidden：确保超出容器宽度的文本不被显示，是实现省略效果的前提。
• text-overflow: ellipsis：定义超出部分的显示形式为省略号（...），该属性需配合overflow: hidden使用才会生效。
• white-space: nowrap：禁止文本换行，强制内容在单行内排列，避免文本自动折行导致省略效果失效。

适用场景：

• 导航菜单、按钮标签等需要严格控制在单行的元素。
• 文章标题、产品名称等长度不定但需保持布局统一的内容。

二、多行文本溢出：灵活可控的进阶方案

实现代码：

关键属性解析：

• display: -webkit-box：启用 WebKit 内核的弹性盒布局模式，为后续属性提供支持。
• -webkit-box-orient: vertical：设置弹性盒内元素垂直排列，确保文本按行堆叠。
• -webkit-line-clamp: 3：核心属性，指定文本最多显示 3 行，超出部分将被省略（可根据需求修改为 2、4 等数值）。
• overflow: hidden：隐藏超出指定行数的文本内容，与单行方案作用一致。

适用场景：

• 博客文章摘要、商品详情描述等需要展示部分内容的场景。
• 响应式布局中，需根据设备尺寸动态调整显示行数（可结合媒体查询实现多端适配）。

注意事项：

• 该方案基于 WebKit 内核的私有属性，在 Firefox 等非 WebKit 浏览器中可能存在兼容性问题。如需全浏览器兼容，可配合 JavaScript 实现补充方案。
• 实际使用时，建议为容器设置固定高度或最小高度，避免因文本长度不足导致的布局晃动。

三、实战应用：根据场景选择合适方案

• 标题类内容（如新闻标题、栏目名称）推荐使用单行省略，确保布局紧凑且信息辨识度高。
• 长文本摘要（如文章预览、评论内容）适合用多行省略，在有限空间内展示更多信息，同时保持页面整洁。