CSS / 文本省略：单行和多行省略号的实现方法

要使用 CSS 视觉上缩短长文本，单行使用 text-overflow: ellipsis，多行使用 line-clamp 属性。CSS 不会删除原始字符串，也不会返回固定数量的字符。可用宽度、换行和溢出必须配合工作以显示截断效果。

区分视觉省略和实际字符串修改

将标题限制为一行或将卡片摘要限制为三行，与使用前20个字符作为数据不同。使用CSS来实现视觉上的限制，使用JavaScript或服务器端处理来进行实际的字符串操作。隐藏的文本仍然存在于文档中，因此CSS不会减少原始数据长度或传输大小。

通过完整示例比较单行与三行

将以下完整代码保存为 truncate.html，编码为 UTF-8 并在浏览器中打开。不需要任何库或服务器。重复的句子使文本足够长，并且卡片的最大宽度为 24rem。编辑后保存并重新加载，然后比较更宽和更窄的窗口。

<!DOCTYPE html>

<html lang="zh">
<head>
<meta charset="utf-8"/>
<meta content="width=device-width, initial-scale=1" name="viewport"/>
<title>单行与多行文本省略比较</title>
<style>
    body { max-width: 42rem; margin: 0 auto; padding: 1rem; font-family: sans-serif; }
    h2 { font-size: 1.1rem; }
    .card { width: 100%; max-width: 24rem; }
    .frame { padding: 12px; border: 1px solid #777; margin-block: 1rem; }
    .sample { margin: 0; }
    .one { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
    .three { font-size: 16px; line-height: 1.6; max-height: 4.8em; overflow: hidden;
      display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; }
    .row { display: flex; align-items: center; gap: 12px; }
    .grow { flex: 1; min-width: 0; }
    .badge { flex: 0 0 auto; }
    .full { line-height: 1.6; overflow-wrap: anywhere; }
  </style>
</head>
<body>
<h1>单行与多行文本省略比较</h1>
<div class="card">
<h2>text-overflow: ellipsis</h2>
<div class="frame"><p class="sample one">此示例在宽度受限的卡片内显示较长的标题和摘要。即使部分文字在视觉上被省略，也可以在下方的展开区域阅读完整内容。 此示例在宽度受限的卡片内显示较长的标题和摘要。即使部分文字在视觉上被省略，也可以在下方的展开区域阅读完整内容。 此示例在宽度受限的卡片内显示较长的标题和摘要。即使部分文字在视觉上被省略，也可以在下方的展开区域阅读完整内容。 此示例在宽度受限的卡片内显示较长的标题和摘要。即使部分文字在视觉上被省略，也可以在下方的展开区域阅读完整内容。 </p></div>
<h2>-webkit-line-clamp: 3</h2>
<div class="frame"><p class="sample three">此示例在宽度受限的卡片内显示较长的标题和摘要。即使部分文字在视觉上被省略，也可以在下方的展开区域阅读完整内容。 此示例在宽度受限的卡片内显示较长的标题和摘要。即使部分文字在视觉上被省略，也可以在下方的展开区域阅读完整内容。 此示例在宽度受限的卡片内显示较长的标题和摘要。即使部分文字在视觉上被省略，也可以在下方的展开区域阅读完整内容。 此示例在宽度受限的卡片内显示较长的标题和摘要。即使部分文字在视觉上被省略，也可以在下方的展开区域阅读完整内容。 </p></div>
<h2>display: flex</h2>
<div class="frame row"><div class="grow"><p class="sample one">此示例在宽度受限的卡片内显示较长的标题和摘要。即使部分文字在视觉上被省略，也可以在下方的展开区域阅读完整内容。 此示例在宽度受限的卡片内显示较长的标题和摘要。即使部分文字在视觉上被省略，也可以在下方的展开区域阅读完整内容。 此示例在宽度受限的卡片内显示较长的标题和摘要。即使部分文字在视觉上被省略，也可以在下方的展开区域阅读完整内容。 此示例在宽度受限的卡片内显示较长的标题和摘要。即使部分文字在视觉上被省略，也可以在下方的展开区域阅读完整内容。 </p></div><span class="badge">A</span></div>
<details>
<summary>阅读完整内容</summary>
<p class="sample full">此示例在宽度受限的卡片内显示较长的标题和摘要。即使部分文字在视觉上被省略，也可以在下方的展开区域阅读完整内容。 此示例在宽度受限的卡片内显示较长的标题和摘要。即使部分文字在视觉上被省略，也可以在下方的展开区域阅读完整内容。 此示例在宽度受限的卡片内显示较长的标题和摘要。即使部分文字在视觉上被省略，也可以在下方的展开区域阅读完整内容。 此示例在宽度受限的卡片内显示较长的标题和摘要。即使部分文字在视觉上被省略，也可以在下方的展开区域阅读完整内容。 </p>
</details>
</div>
</body>
</html>

期望第一个框显示一行截断，第二个框在支持的情况下最多显示三行截断，第三个框在 Flexbox 内显示一行截断。展开下面的部分以阅读完整内容。短文本可能永远达不到限制，因此不会显示省略号。实际换行取决于字体、内容和可用宽度。

单行省略号出现的条件

单行截断要求文本溢出其水平空间。white-space: nowrap 防止换行，overflow: hidden 隐藏溢出部分，text-overflow: ellipsis 标记被截断的结尾。以下是完整示例的 .one 规则。

.one {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

仅设置 text-overflow 并不会强制溢出或使盒子变窄。此处的父卡片约束了宽度。如果盒子随内容不断增长，或文本足够短，则不会出现省略号。普通内联元素可能不会如预期那样表现；请检查块级盒子和实际布局上下文。MDN 关于 text-overflow 的解释

多行限制与高度回退方案

仅添加 text-overflow: ellipsis 并不会在第三行末尾显示省略号。该示例结合了遗留兼容性声明 -webkit-line-clamp: 3、display: -webkit-box 和 -webkit-box-orient: vertical，以及隐藏溢出。以下是其 .three 规则。

.three {
  font-size: 16px;
  line-height: 1.6;
  max-height: 4.8em;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

在这里，字体大小为 16px，行高为 1.6 时，一行高度为 25.6px，三行占 76.8px，或 4.8em。即使无法使用 clamp，max-height: 4.8em 也会限制高度。仅限高并不能保证省略号。该计算假设示例的一致字体大小和行高，并且文本元素上没有额外的内边距或边框。

未加前缀的 line-clamp 属性在不同浏览器中的支持情况不一，因此请检查目标环境中的支持表和渲染情况。在适当的情况下，通过功能查询逐步应用，并在替换兼容性声明之前检查支持情况。要比较两行，请将 -webkit-line-clamp 的行数和回退高度分别更改为 2 和 3.2em，然后恢复原值。MDN line-clamp 兼容性和支持信息

Flexbox 或 Grid 中的元素无法缩小时

弹性子项的自动最小宽度可能会使其保持与内容大小一致，阻止其在父元素缩小时足够缩小。示例为 .grow 提供了 flex: 1 和 min-width: 0，以便其可以缩小。将截断应用于 .one，该元素实际包含文本。

在开发者工具中暂时移除 .grow 的 min-width，进行比较后再恢复。这并不是每个 flex 项目的通用要求；请检查实际的最小尺寸和溢出情况。对于 Grid 自动最小尺寸的问题，请检查该项的最小宽度，并在适当时考虑灵活的轨道定义，例如 minmax(0, 1fr)。 MDN 关于 min-width 自动最小尺寸的解释

提供完整内容和无障碍访问

提供一种读取隐藏内容的方法。示例中的 details 和 summary 是原生 HTML 元素，可以在没有 JavaScript 的情况下用鼠标、触摸和键盘操作。真正的界面可以提供详情页链接或其他清晰的展开控件。

1. 不要仅依赖title 属性的鼠标悬停提示来阅读全部内容。触摸和键盘用户也需要访问权限。
2. 隐藏文本在被复制或辅助技术读取时的呈现方式可能会有所不同。请检查必要的文本是否仍然可读，并确保焦点在展开控件上有效。
3. 检查移动屏幕、缩放和用户选择的字体。不要承诺固定的字符或单词数量，避免对重要信息、按钮或输入字段进行裁剪。