【CSS Tricks】试试新思路去处理文本超出情况

news2024/10/6 12:41:57

引言

本篇为css的一个小技巧

文本溢出问题是一个较为常见的场景。UI设计稿为了整体的美观度会将文本内容限制到一定范围内，然而UI设计阶段并不能预先适配任意长度的文字信息，所以需要从开发侧操作一下，将文本限制在UI设计的范围内。

文本溢出的开发场景：

卡片标题过长
用户通知信息列表摘要信息过长。
上传附件列表，文件名过长。
下拉列表选项文本过长。
其他

一、常规套路

准备一份文本内容：

    <div class="ellipsis_text">
      在网页或应用设计中，当多行文本内容超过设定的显示范围时，使用省略号来表示文本被截断是一种常见的做法。这不仅有助于保持界面的整洁美观，还能有效利用有限的空间展示尽可能多的信息。实现这一效果通常需要CSS样式支持，如设置overflow:
      hidden;、text-overflow: ellipsis;和display:
      -webkit-box;等属性，并结合-webkit-line-clamp属性控制显示的行数。这种方法适用于大多数现代浏览器，能够确保即使在不同设备上也能一致地呈现文本截断效果。
    </div>

1. 单行文本省略

.ellipsis_text {
	width: 200px; /* 需限制宽度 */
	overflow: hidden; /* 隐藏溢出的内容 */
	white-space: nowrap; /* 确保文本在一行内显示 */
	text-overflow: ellipsis; /* 使用省略号表示文本溢出 */
}

2. 多行文本省略

.ellipsis_text {
	width: 200px;
	overflow: hidden; /* 隐藏溢出的内容 */
	display: -webkit-box;  /* 使用Webkit内核的弹性盒布局模型来显示对象。这种布局模型允许更灵活地控制子元素的排列和对齐方式。 */
	-webkit-line-clamp: 3;  /* 可以把块容器中的内容限制为指定的行数。它只有在 display 属性设置成 -webkit-box 或者 -webkit-inline-box 并且 box-orient 属性设置成 vertical时才有效果。 */
	-webkit-box-orient: vertical; /* 设置弹性盒对象的子元素排列方向为垂直。这意味着子元素会从上到下依次排列，这对于多行文本尤其重要。 */
}

将 -webkit-line-clamp 值设置为1，同样可以获得单行文本省略的效果。

各属性介绍查看上述代码注释

二、新思路美化一下

1. 单行/多行文本隐藏

核心点在于，利用overflow隐藏多余内容；利用伪类制作遮罩隐藏后半段，营造还有更多内容的引导效果。

解释下代码设计逻辑

设置四个css变量：
- --line_clamp 表示需要显示多少行。
- --line_height 表示行高，这个很重要，这里实现的效果依赖于确定的行高，用于计算总体容器高度以及遮罩高度。
- --background_color 和 --font_color 这两个变量依据自己需求设置即可，颜色需要反色使对比明显。
先确定文本行高，再使用 --line_clamp 乘以 --line_height 确定总体容器的高度。
利用伪类after设置背景色渐变，通过定位移动到最后一行进行内容遮罩。

    .ellipsis {
      --line_clamp: 3;
      --line_height: 2rem;
      --background_color: #000;
      --font_color: #fff;
      width: 400px;
      line-height: var(--line_height);
      height: calc(var(--line_height) * var(--line_clamp));
      overflow: hidden; /* 隐藏溢出的内容 */
      position: relative;
      background-color: var(--background_color);
      color: var(--font_color);
      font-weight: bold;
      font-size: 24px;
    }
    .ellipsis::after {
      content: "...";
      width: 400px;
      height: var(--line_height);
      position: absolute;
      right: 0;
      bottom: 0;
      background: linear-gradient(
        to right,
        transparent 50%,
        var(--background_color) 90%
      );
    }