文本溢出体验进阶：CSS 技巧实现单行/多行隐藏展示以及实际场景应用，确保内容可读性和布局整洁性

在这里插入图片描述

CSS文本溢出隐藏是一种常见的场景，它广泛应用于各种网页设计中，旨在确保内容的可读性和布局的整洁性，特别是在空间有限或需要适应不同屏幕尺寸的情况下。

一、文本溢出隐藏并显示省略号

1、单行文本溢出隐藏并显示省略号

对于单行文本，通常只需设置以下三个CSS属性：

.single-line-text {
  overflow: hidden; /* 隐藏溢出内容 */
  text-overflow: ellipsis; /* 当文本溢出时显示省略号 */
  white-space: nowrap; /* 禁止文本换行 */
}

应用示例：

<div class="single-line-text">
  这是一段非常非常非常非常非常非常长的单行文本，超出部分会被隐藏并显示省略号...
</div>

在这个例子中，当文本长度超过其容器的宽度时，超出的部分将会被隐藏，同时在文本末尾显示省略号（…），表示文本已被截断。

2、多行文本溢出隐藏并显示省略号

多行文本的溢出隐藏并显示省略号稍微复杂一些，因为CSS标准本身并不直接支持多行文本的text-overflow: ellipsis。不过，可以通过结合使用line-clamp属性（现代浏览器支持）和伪元素来模拟这一效果：

.multi-line-text {
  display: -webkit-box; /* 兼容WebKit内核浏览器，如Chrome和Safari */
  -webkit-line-clamp: 3; /* 显示最大3行 */
  -webkit-box-orient: vertical; /* 设置垂直方向上的排列方式 */

  overflow: hidden; /* 隐藏溢出内容 */
  text-overflow: ellipsis; /* 当文本溢出时显示省略号 */

  /* 对于非WebKit内核浏览器，可以使用以下CSS Grid方案作为备用（但不会显示省略号） */
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
  max-height: .jpgem; /* 调整为所需的行高乘以最大行数 */
  margin-bottom: .2em; /* 为省略号留出空间（可选） */
  padding-right: .½em; /* 为省略号留出空间（可选） */
}

/* 为非WebKit内核浏览器添加省略号（仅在支持伪元素的浏览器中有效） */
.multi-line-text::after {
  content: '...'; /* 添加省略号 */
  position: absolute;
  right: 0; /* 将省略号定位到右侧 */
  bottom: 0; /* 将省略号定位到底部 */
  background-color: white; /* 与背景色相同，覆盖可能的多余文本 */
  width: .5em; /* 省略号宽度 */
  height: .5em; /* 省略号高度 */
  line-height: .5em; /* 保持省略号居中 */
  text-align: center;
}

应用示例：

<div class="multi-line-text">
  这是一段非常非常非常非常非常非常长的多行文本，超出指定行数的部分会被隐藏并（在支持的浏览器中）显示省略号...
</div>

在这个例子中，文本将被限制为最多显示3行。当文本内容超过这个限制时，超出的部分将会被隐藏。在支持-webkit-line-clamp属性的浏览器（如基于WebKit内核的Chrome和Safari）中，会在文本末尾自动显示省略号。对于不支持该属性的浏览器，可以尝试使用CSS Grid结合伪元素模拟类似效果，尽管这可能无法精确地在最后一行显示省略号，而是简单地在容器底部附加一个省略号。

请注意，多行文本省略号的实现可能需要针对不同浏览器进行兼容性调整，因为并非所有浏览器都原生支持多行text-overflow: ellipsis。上述示例提供了一种常见的跨浏览器解决方案，但实际应用时可能需要根据目标浏览器的支持情况和项目需求进行调整。

二、文本溢出隐藏能滑动展示隐藏部分

很多时候，默认只展示一部分（单行或者多行），可以通过横向或者纵向滑动展示剩余部分而不是直接省略，体验会更好。

.scroll-text {
  width: 288rpx;
  max-height: 148rpx;
  overflow: scroll; /* 溢出内容可以滚动 */

  line-height: 44rpx;
}

应用示例：

<div class="scroll-text">
  这是一段非常非常非常非常非常非常长的文本，超出部分会被隐藏，纵向滑动可以查看隐藏内容
</div>

在这个例子中，当文本长度超过其容器的最高max-height时，超出的部分将会被隐藏，可以通过滑动显示被隐藏部分内容。

三、文本溢出隐藏应用场景

1. 导航菜单项或标签页标题

在有限的空间内，导航菜单项或标签页标题可能包含较长的文本。为了保持导航栏的紧凑性和美观性，可以设置溢出隐藏：

.nav-item,
.tab-title {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  max-width: 100%; /* 或指定一个固定宽度 */
}

2. 卡片或列表项描述

在卡片式布局或列表视图中，每个项目的描述文本可能因内容长度差异导致整体布局不整齐。通过溢出隐藏，可以确保描述始终保持在设定的区域内：

.card-description,
.list-item-content {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2; /* 可根据需要调整行数 */
  -webkit-box-orient: vertical;
  line-height: 1.5; /* 保持适当的行间距 */
}

/* 对于不支持 `-webkit-line-clamp` 的浏览器，可以使用以下备用方案 */
.card-description.fallback,
.list-item-content.fallback {
  max-height: 3.6em; /* 调整为期望的最大行数乘以行高 */
  margin-bottom: .2em; /* 为省略号留出空间 */
  padding-right: .5em; /* 为省略号留出空间 */
  position: relative;
}

.card-description.fallback::after,
.list-item-content.fallback::after {
  content: '...';
  position: absolute;
  right: 0;
  bottom: 0;
  background-color: white; /* 与背景色相同，覆盖可能的多余文本 */
  width: .5em;
  height: .5em;
  line-height: .5em;
  text-align: center;
}

3. 表格单元格

表格中，特别是数据密集型表格，单元格内的文本可能过长，影响表格的可读性和美观性。对特定列应用溢出隐藏可以避免这种情况：

table.data-table td.long-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 如果需要支持多行省略，可以使用以下CSS Grid方案 */
table.data-table td.long-text.multiline {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
  max-height: 3em; /* 调整为所需的行高乘以最大行数 */
}

4. 用户评论或消息摘要

在论坛、社交媒体或聊天应用中，用户评论或消息摘要常常需要在有限的空间内展示。使用溢出隐藏可以保持界面一致性：

.comment-summary,
.message-preview {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: ¾; /* 可根据需要调整行数 */
  -webkit-box-orient: vertical;
}

/* 对于不支持 `-webkit-line-clamp` 的浏览器，可以使用以下备用方案 */
.comment-summary.fallback,
.message-preview.fallback {
  max-height: 2.¼em; /* 调整为期望的最大行数乘以行高 */
  margin-bottom: .2em; /* 为省略号留出空间 */
  padding-right: .5em; /* 为省略号留出空间 */
  position: relative;
}

.comment-summary.fallback::after,
.message-preview.fallback::after {
  content: '...';
  position: absolute;
  right: 0;
  bottom: 0;
  background-color: white; /* 与背景色相同，覆盖可能的多余文本 */
  width: .5em;
  height: .5em;
  line-height: .5em;
  text-align: center;
}

5. 响应式布局中的小屏幕设备

在移动端或小屏幕设备上，为了适应窄小的视口，往往需要对内容进行缩放或截断。文本溢出隐藏在此类场景中尤为重要：

@media (max-width: 767px) {
  .responsive-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    /* 或者针对多行文本使用 -webkit-line-clamp 或 CSS Grid 方案 */
  }
}