多行文本省略显示+查看更多按钮

站长

2024年06月16日 17:34 · 阅读数 60

多行文本省略号显示+紧跟查看更多按钮

效果图如下

前置条件

以下描述把多行文本，多行称为n行 定line-height行高，定文本内容要固定展示几行背景颜色：三文鱼颜色代表文本内容，天空湛蓝色代表父元素的伪元素

实现方法

1.文字环绕，float：right，省略号和查看更多按钮作为一个整体设置浮动，实现文字环绕（跟word文档一样的效果），但是此时元素是在右上角和我们需求右下角不符，如下图所示：

2.省略号和按钮归位，父元素设置伪元素，并设置高度，高度为（n - 1）* line-height。换句话说假设实现三行文本溢出隐藏，那么此时伪元素的高度为（3-1）* 段落行高，目的是什么？目的是把查看更多按钮,挤到右下角，如下图所示：

3.文本内容归位，父元素设置伪元素会把部分文本内容向下挤出可视区域，需要设置文本盒子margin-top: - 伪元素高度，让文本内容回归正常显示。当然文本内容向上设置负边距后依然是文字环绕，也就实现了我们想要的效果，如下图所示：

注意

省略号和查看更多按钮，需要通过js判断文本内容高度是否超出盒子固定展示的高度，进而控制显示和隐藏。省略号和查看更多可选其一，也可都要，视需求而定。

源码示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>多行文本省略 + 查看更多</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .content {
            width: 300px;
            height: 120px;
            background: salmon;
            word-break: break-all;
            overflow: hidden;
            /* display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2; */
            line-height: 40px;
            border: 2px dashed forestgreen;
            margin-bottom: 20px;


        }

        .content::before {
            display: block;
            content: '';
            height: 80px;
            background: lightblue;
        }

        .text-box {
            margin-top: -80px;

        }

        .btn {
            float: right;

        }

        .btn>span:nth-child(2) {
            cursor: pointer;
            color: deepskyblue;
            background: #ccc;
        }
    </style>
</head>

<body>
    <div class="content">
        <div class="btn">
            <span>...</span>
            <span onclick="viewMore()">查看更多</span>
        </div>
        <div class="text-box">
            Lorem ipsum dolor sit, amet consectetur adipisicing elit. Tenetur officia perferendis consequuntur dicta
            reiciendis voluptas laudantium dolor hic rerum deleniti! Repellendus tempore totam obcaecati! Expedita,
            obcaecati at! Sit, beatae. Reiciendis Lorem ipsum dolor sit, amet consectetur adipisicing elit. Eveniet
            nostrum
            aliquam repellendus, excepturi totam enim expedita corrupti voluptatem, vitae consectetur minima. Officiis
            reprehenderit possimus illo libero maxime ab, ullam voluptas! Lorem ipsum dolor, sit amet consectetur
            adipisicing elit. Quidem sunt, harum rerum alias dolor earum autem doloribus? Eius, praesentium ea minus
            expedita facere amet! Culpa nemo consectetur fugiat cumque commodi?
        </div>
    </div>
    <div class="content">
        <div class="btn">
            <span>...</span>
            <span onclick="viewMore()">查看更多</span>
        </div>
        <div class="text-box">
            Lorem ipsum dolor sit, amet consectetur adipisicing elit. Tenetur officdis consequuntur dicta

        </div>
    </div>

    <script>
        const textEle = document.querySelectorAll('.text-box');
        console.log(textEle);
        const textEleList = Array.from(textEle);
        console.log(textEleList);
        for (let i = 0; i < textEleList.length; i++) {
            const targetNode = textEleList[i]
            console.log(targetNode.offsetHeight, 'visible height：' + 120);
            if (targetNode.offsetHeight <= 120) {
                const btn = targetNode.parentNode.querySelector('.btn');
                targetNode.parentNode.removeChild(btn)
            }
        }

        const viewMore = () => {
            alert('完整内容')
        }

    </script>
</body>

</html>

转载自:https://juejin.cn/post/7366913974624239651