蓝桥杯 - 简单 - 由文本溢出引发的“不友好体验”

要求

代码

<!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-line-clamp: 2; /* 限制显示的行数为 2 行 */
             -webkit-box-orient: vertical;
             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>
        // 请在下方补充代码，使得文本溢出 2 行时使用省略号
    </script>
</body>

</html>

补充

1.使用 JavaScript 处理

在 JavaScript 中，我们可以通过定义一个函数，该函数会接收原始字符串和最大行数作为参数，计算出需要显示的文本长度，并返回处理过的字符串，最后在末尾添加省略号。

实现步骤：

计算行高: 要处理多行文本，首先需要知道每行的高度，可以在样式中设置行高（line-height），然后再计算总高度。
截取文本: 按照字符数或文字占用的高度来截取文本。
拼接省略号: 在截取后的文本后面添加 ...。

function truncateText(element, maxLines) {
    const lineHeight = parseFloat(getComputedStyle(element).lineHeight);
    const maxHeight = lineHeight * maxLines;

    let text = element.innerText; // 获取原始文本
    element.innerText = text; // 赋值到元素中

    while (element.offsetHeight > maxHeight) {
        text = text.slice(0, -1); // 每次去掉最后一个字符
        element.innerText = text + '...'; // 加入省略号
    }
}

// 使用示例
const element = document.querySelector('.text'); // 获取目标元素
truncateText(element, 2); // 限制展示 2 行文本

2.使用 CSS3 处理

CSS3 提供了一些特性，借助这些特性可以很方便地处理文本溢出并显示省略号。

实现步骤：

设置容器: 需要为文本容器设置一个固定的高度，这个高度应该是垂直方向的行数乘以行高。
使用 overflow 属性: 将 overflow 属性设置为 hidden 以隐藏超出容器的部分。
使用 text-overflow 和 line-clamp: CSS3 的 text-overflow 可以在文本溢出时显示省略号，而 line-clamp 则可以用于多行文本的限制。

.text {
    display: -webkit-box; /* 使用 Flexbox 布局 */
    -webkit-box-orient: vertical; /* 垂直方向布局 */
    -webkit-line-clamp: 2; /* 显示的行数 */
    overflow: hidden; /* 隐藏超出部分 */
    text-overflow: ellipsis; /* 末尾加省略号 */
    line-height: 1.5em; /* 行高 */
    max-height: 3em; /* 允许的最大高度，每行1.5em，2行 */
}

<div class="text">
    这是一个示例文本，展示如何使用 CSS3 和 JavaScript 来处理文本超出部分的显示逻辑。我们希望只有两行文本能够正常显示，而超出部分用省略号来表示。
</div>

总结

JavaScript 方法:
- 灵活，能够根据需要截取文本。
- 需要计算行高和动态调整文本。
- 适合需要基于特定逻辑处理文本的场景。
CSS3 方法:
- 简单、易于实现，主要通过 CSS 样式来解决问题。
- 性能较好，不需要 JavaScript 计算，可以直接应用于元素。
- 适合单纯的多行文本限制和省略号处理的场景。

蓝桥杯 - 简单 - 由文本溢出引发的“不友好体验”

要求

代码

补充

1.使用 JavaScript 处理

实现步骤：

2.使用 CSS3 处理

实现步骤：

总结

悦读