由文本溢出引发的“不友好体验”

作者:江月迟迟

发表于:2024-12-10

字数统计:981 字

预计阅读4分钟

背景介绍

通常情况下，为保证布局的稳定性，以及遵循在有限的空间展示更多内容的原则，页面的某块区域不会随内容的增多而无限增高或增宽，一般会有一个约束。

例如：整体元素过多可以使用滚动条；文字内容过多可以使用文本溢出处理。

这些情况在实际开发中经常遇到。例如电商平台的商品列表中对商品的描述通常是简短的介绍，详细的介绍需要点击进去才能看到。

如下图所示：

如果不进行限制，那就会变成这样：

这么一看对用户而言，是不是体验很不好，商品的简介把价格都遮挡住了。因此，解决这样的问题成为日常开发中不可或缺的需求。

本节挑战中，就有类似的场景：页面中某块区域的文本内容过多，导致占用了其他内容的空间。效果如下图所示：

上图文本中一共占用了 11 行文本。实际需求中，我们只希望显示 2 行即可，剩余的内容用省略号（...）替代。

通常，处理这类问题的方式有以下几种：

1. 使用 JS 处理，先将字符串按照一定长度进行切割，去掉超出部分的内容，然后在末尾拼接省略号。
2. 使用 CSS3 处理，利用相关的 Webkit 属性，结合 overflow 属性通过样式实现。

本节挑战，你需要开动脑筋，解决这一文本溢出的问题。

准备步骤

开始答题前，你需要确保基础代码已下载。如果没有成功下载，请点击并打开右侧环境窗口，然后在终端中键入以下命令，下载页面的基础代码：

wget https://labfile.oss.aliyuncs.com/courses/9203/03.zip && unzip 03.zip && rm 03.zip

具体操作参考下图：

测试效果

可通过如下步骤测试效果：

1. 右键 03/index.html，选择 Open with Live Server。
2. 点击右侧的 Web 服务。

具体操作参考下图：

上述操作会在浏览器中打开新的标签页，如下图所示，请点击 03 文件夹：

之后，你将看到如下效果：

请通过下述挑战要求，修改 03/index.html 文件，解决文本溢出的问题，最终达到如下效果：

挑战需求

请打开 03/index.html 文件，该文件中有一段代码需要你补充，用以处理文本超出溢出的情况。

1. 本节挑战需使用 CSS3 的处理方式解决该问题，其他方式无效。
2. 要求溢出 2 行时进行处理。
3. 切勿改动源代码中已写好的部分。

要求规定

1. 请严格按照考试步骤操作，切勿修改考试默认提供项目中的文件名称、文件夹路径等。
2. 满足题目需求后，保持 Web 服务处于可以正常访问状态，点击「提交检测」系统会自动判分。
3. 不要篡改已提供的基础项目中的 id 和 class 等属性值及 DOM 结构，以免造成检测失败。

总通过次数: 1048 | 总提交次数: 1075 | 通过率: 97.5%

难度: 简单 标签: CSS3, Web 前端

题解

// 请在下方补充代码，使得文本溢出 2 行时使用省略号
      const p = document.querySelector(".more2_info_name");
      p.style.overflow = "hidden";
      p.style.textOverflow = "ellipsis";
      p.style.display = "-webkit-box";
      p.style.webkitLineClamp = "2"; // 设置为想要显示的行数，比如 1 表示只显示一行
      p.style.webkitBoxOrient = "vertical"; // 设置为垂直方向