【Html.js——Bug解决】由文本溢出引发的“不友好体验”（蓝桥杯真题-2158）【合集】

Rossy Yan

发布于 2025-01-24 11:23:59

16500

代码可运行

文章被收录于专栏：【Educoder实训】头歌实践教学平台【Educoder实训】头歌实践教学平台

运行总次数：0

代码可运行

背景介绍

通常情况下，为保证布局的稳定性，以及遵循在有限的空间展示更多内容的原则，页面的某块区域不会随内容的增多而无限增高或增宽，一般会有一个约束。例如：整体元素过多可以使用滚动条；文字内容过多可以使用文本溢出处理。这些情况在实际开发中经常遇到。例如电商平台的商品列表中对商品的描述通常是简短的介绍，详细的介绍需要点击进去才能看到。如下图所示：

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

这么一看对用户而言，是不是体验很不好，商品的简介把价格都遮挡住了。因此，解决这样的问题成为日常开发中不可或缺的需求。本节挑战中，就有类似的场景：页面中某块区域的文本内容过多，导致占用了其他内容的空间。效果如下图所示：

上图文本中一共占用了 11 行文本。实际需求中，我们只希望显示 2 行即可，剩余的内容用省略号（...）替代。通常，处理这类问题的方式有以下几种：

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

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

准备步骤

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

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

具体操作参考下图：

测试效果

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

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

具体操作参考下图：

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

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

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

挑战需求

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

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

要求规定

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

通关代码✔️

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>由文本溢出引发的“不友好体验”</title>
    <link rel="stylesheet" href="https://labfile.oss.aliyuncs.com/courses/9203/03style.css">
    <style>
        .more2_info_name {
            display:-webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
            overflow: hidden;
            text-overflow: ellipsis;
        }
    </style>
</head>

<body>
    <div class="container">
        <ul>
            <li class="more2_item more2_item_good hover-on"><span class="more2_item_gdot"></span><a class="more2_lk"
                    href="" target="_blank">
                    <div class="more2_img"><img src="https://labfile.oss.aliyuncs.com/courses/9203/04_02.jpg"
                            class="lazyimg_img" alt="">
                    </div>
                    <div class="more2_info">
                        <p class="more2_info_name">
                            <i class="more2_info_self">新课</i>
                            随着前端的发展，UI 框架经历了刀耕火种的时代，层出不穷的 UI 框架让前端再次大放异彩。ElementUI
                            作为前端发展史上最为经典的组件库之一，学习并了解它是如何构建的，以及它的源码是如何搭建出 UI 组件的，都将为我们今后的发展与应用提供可借鉴之处！
                        </p>
                        <div class="more2_info_price more2_info_price_plus more2_info_price_newcomer">
                            <div class="mod_price"><i>¥</i><span class="more2_info_price_txt">72.<span
                                        class="more2_info_price_txt-decimal">00</span></span></div>
                        </div>
                    </div>
                </a></li>
        </ul>
    </div>
    <script>
       // 这里的 JavaScript 代码可以根据需求添加，上述的文本溢出处理主要通过 CSS 完成
    </script>
</body>

</html>

代码解析📑

一、HTML 部分

//index.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>由文本溢出引发的“不友好体验”</title>
    <link rel="stylesheet" href="https://labfile.oss.aliyuncs.com/courses/9203/03style.css">
    <style>
       .more2_info_name {
            display:-webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
            overflow: hidden;
            text-overflow: ellipsis;
        }
    </style>
</head>
<body>
    <div class="container">
        <ul>
            <li class="more2_item more2_item_good hover-on"><span class="more2_item_gdot"></span><a class="more2_lk" href="" target="_blank">
                    <div class="more2_img"><img src="https://labfile.oss.aliyuncs.com/courses/9203/04_02.jpg" class="lazyimg_img" alt="">
                    </div>
                    <div class="more2_info">
                        <p class="more2_info_name">
                            <i class="more2_info_self">新课</i>
                            随着前端的发展，UI 框架经历了刀耕火种的时代，层出不穷的 UI 框架让前端再次大放异彩。ElementUI 作为前端发展史上最为经典的组件库之一，学习并了解它是如何构建的，以及它的源码是如何搭建出 UI 组件的，都将为我们今后的发展与应用提供可借鉴之处！
                        </p>
                        <div class="more2_info_price more2_info_price_plus more2_info_price_newcomer">
                            <div class="mod_price"><i>¥</i><span class="more2_info_price_txt">72.<span class="more2_info_price_txt-decimal">00</span></span></div>
                        </div>
                    </div>
                </a></li>
        </ul>
    </div>
    <script>
       // 这里的 JavaScript 代码可以根据需求添加，上述的文本溢出处理主要通过 CSS 完成
    </script>
</body>
</html>

文档类型声明和语言设置：
- <!DOCTYPE html>：声明该文档是一个 HTML5 文档，确保浏览器使用最新的 HTML 标准进行渲染。
- <html lang="en">：将文档的语言设置为英语，这对于搜索引擎优化和辅助工具（如屏幕阅读器）是很重要的。
头部信息：
- <meta charset="UTF-8">：指定字符编码为 UTF-8，使页面能够正确显示各种字符。
- <title>由文本溢出引发的“不友好体验”</title>：设置网页的标题，该标题会显示在浏览器的标签栏上。
- <link rel="stylesheet" href="https://labfile.oss.aliyuncs.com/courses/9203/03style.css">：从外部引入一个 CSS 文件，为页面提供样式，可能包含页面的一些通用样式，如字体、颜色、布局等。
- <style> 部分：
  - 内部样式表，主要用于解决文本溢出问题。其中 .more2_info_name 类的样式将被应用于相应的元素。
主体部分：
- <div class="container">：一个容器元素，通常用于布局和组织页面内容。
- <ul>：无序列表元素，用于包含一系列的列表项。
- <li class="more2_item more2_item_good hover-on">：列表项元素，包含多个类名，可能用于不同的样式和交互效果，如 more2_item 表示这是 more2 系列的元素，more2_item_good 可能表示该元素具有某种良好的状态，hover-on 可能表示当鼠标悬停时有特殊的样式效果。
- <span class="more2_item_gdot"></span>：一个空的 span 元素，可能用于显示一个装饰性的点或图标，具体样式由外部的 CSS 决定。
- <a class="more2_lk" href="" target="_blank">：一个链接元素，href 为空，target="_blank" 表示该链接将在新窗口或标签页中打开。
- <div class="more2_img"><img src="https://labfile.oss.aliyuncs.com/courses/9203/04_02.jpg" class="lazyimg_img" alt="">：包含一个图像元素，src 属性指定图像的来源，class="lazyimg_img" 可能用于实现图像的懒加载或应用其他图像相关的样式，alt 属性提供图像的替代文本，当图像无法显示时会显示该文本，同时也有助于搜索引擎理解图像内容。
- <div class="more2_info">：一个包含信息的容器元素，可能用于展示课程或商品的详细信息。
- <p class="more2_info_name">：一个段落元素，使用了 .more2_info_name 类，该类将应用在 <style> 中定义的文本溢出处理样式。
  - <i class="more2_info_self">新课</i>：可能是用于强调的元素，通常 <i> 元素用于表示斜体文本，这里可能用于突出显示 “新课” 这个词。
  - 段落中的文本是一段较长的描述，可能会出现文本溢出的情况，通过应用 .more2_info_name 类的样式，它将被限制在 2 行并在溢出时显示省略号。
- <div class="more2_info_price more2_info_price_plus more2_info_price_newcomer">：一个包含价格信息的元素，多个类名可能对应不同的价格样式，如 more2_info_price_plus 可能表示有额外价格信息，more2_info_price_newcomer 可能表示针对新用户的价格。
- <div class="mod_price"><i>¥</i><span class="more2_info_price_txt">72.<span class="more2_info_price_txt-decimal">00</span></span></div>：用于显示价格的元素，使用 <i> 元素显示货币符号，span 元素显示价格的整数和小数部分，可能会应用不同的样式以区分不同的部分。

二、CSS 部分

.more2_info_name {
    display:-webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    text-overflow: ellipsis;
}

.more2_info_name 选择器：
- display:-webkit-box;：将元素的显示方式设置为 -webkit-box，这是为了使用 -webkit-line-clamp 属性而进行的设置，将元素作为一个弹性盒模型处理。
- -webkit-box-orient: vertical;：设置 -webkit-box 的方向为垂直方向，这样文本将垂直排列。
- -webkit-line-clamp: 2;：将元素的文本显示行数限制为 2 行，这是解决文本溢出的核心属性，该属性是一个实验性的属性，主要在 WebKit 内核的浏览器中使用。
- overflow: hidden;：当文本内容超出元素的高度时，将超出的部分隐藏起来，防止内容溢出显示。
- text-overflow: ellipsis;：当文本内容超出元素的显示区域时，在最后一行的末尾显示省略号，给用户一个简洁的提示，表明还有更多的内容未显示。

三、工作流程 ▶️

在 HTML 中，构建了页面的基本结构，包括列表、列表项、图片、信息容器和价格信息等元素，其中可能会出现文本溢出的元素是 .more2_info_name 类的 p 元素。
在 CSS 中，为 .more2_info_name 元素添加了一系列的样式，通过设置 display 为 -webkit-box 和 box-orient 为 vertical，将元素作为垂直的弹性盒模型处理。
使用 -webkit-line-clamp: 2; 将元素的文本显示行数限制为 2 行。
当文本内容超过 2 行时，通过 overflow: hidden; 隐藏超出的部分，并使用 text-overflow: ellipsis; 在末尾显示省略号，从而解决了文本溢出带来的不友好体验。
当浏览器渲染页面时，会根据这些 HTML 和 CSS 规则对元素进行布局和样式的设置，使页面达到预期的效果，同时避免了文本溢出影响页面的美观和用户体验。