美文网首页
文本布局:展开、收起 多行省略...

文本布局:展开、收起 多行省略...

作者: 码农私房菜 | 来源:发表于2021-05-22 14:42 被阅读0次

展开、收起 多行省略...

基本DOM结构

import React from 'react'
import './index.less'

const ShopSearch = (props: any) => {
    
    // 请求数据
    return (
        <div className="multi-line-wrap">
            <input type="checkbox" id="exp" />
            <div className="multi-line">
                <label className="multi-line-btn" htmlFor="exp" />
                  贝多芬、米开朗琪罗、托尔斯泰有不同的事业,不同的身份,来自不同的国家,存在于不同的时代,然而一个共同的特点使三个人共为“名人”——在磨难面前不倒且从未失去对广大人民的热爱与同情。无论是生理还是心理,可控与不可控的挫折与磨难,他们虽感到痛苦,但他们不愿倒下,且心中的博爱之火从未熄灭,只会愈燃愈烈,即使是所爱的人给予他们以不幸。他们被称为英雄,不是借强力以制胜者,而是人类的忠仆,倾心为人民服务,“靠心灵而伟大的人”。
            </div>
        </div>
    )
}

export default ShopSearch

css样式

@lineHeight: 26px;
@fontSize: 16px;
@lineNum: 4;
@lineEm: 1.5;
@bgColor: #fff;
@btn-bgColor: rgb(57, 119, 253);

.multi-line-wrap {
    display: flex;
    width: 700px;
    overflow: hidden;
    border-radius: 8px;
    padding: 15px;
    .multi-line {
        font-size: @fontSize;
        overflow: hidden;
        text-overflow: ellipsis;
        text-align: justify;
        // .line-clamp;
        line-height: @lineEm;
        max-height: calc(@lineNum * @lineEm * 1em);
        position: relative;
        transition: 0.3s all;
        background: @bgColor;
        &::before {
            content: '';
            float: right;
            width: 0px;
            height: calc(100% - @lineHeight + 2px);
            background: red;
        }
        &::after {
            content: '';
            width: 999vw;
            height: 999vw;
            position: absolute;
            box-shadow: inset calc(100px - 999vw) calc(30px - 999vw) 0 0 @bgColor;
            margin-left: -100px;
        }

        .multi-line-btn {
            position: relative;
            float: right;
            clear: both;
            margin-left: 20px;
            font-size: @fontSize;
            padding: 0 8px;
            background: @btn-bgColor;
            line-height: calc(@lineHeight - 2px);
            border-radius: 4px;
            color: rgb(59, 59, 59);
            cursor: pointer;
            border: 0;
            &::after {
                content: '展开'; /*采用content生成*/
            }
            &::before {
                content: '...';
                position: absolute;
                left: -5px;
                top: 0;
                color: rgb(61, 60, 60);
                transform: translateX(-100%);
            }
        }
    }

    #exp {
        position: fixed;
        left: -10000px;
        top: 0;
        &:checked + .multi-line {
            -webkit-line-clamp: 999; /*设置一个足够大的行数就可以了*/
            max-height: none;
            max-height: 3000px; /*超出最大行高度就可以了*/
            &::after {
                visibility: hidden;
            }
            .multi-line-btn {
                &::after {
                    content: '收起'; /*采用content生成*/
                }
                &::before {
                    content: '';
                }
            }
        }
    }
}

.line-clamp {
    display: -webkit-box;
    -webkit-line-clamp: @lineNum;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

效果图:

合起.png
展开.png
正常.png

相关文章

网友评论

      本文标题:文本布局:展开、收起 多行省略...

      本文链接:https://www.haomeiwen.com/subject/umfzjltx.html