美文网首页
你不知道的省略号

你不知道的省略号

作者: lzy_9fff | 来源:发表于2024-08-09 12:03 被阅读0次

    解决多行省略号完美兼容性问题!!


    image.png
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style>
            body {
                background-color: antiquewhite;
            }
            .container {
                padding: 12px;
                background-color: white;
                margin: 0;
                border-radius: 4px; 
                width: 300px;
            }
            .text-wrapper {
                margin: 0;
                height: 60px;
                overflow: hidden;
            }
            .text-wrapper .content{
                margin-top: -60px;
                line-height: 20px;
                text-align: justify;
            }
            .text-wrapper::before {
                content: '';
                height: 40px;
                display: block;
                background-color: bisque;
            }
            .text-wrapper .more {
                float: right;
                line-height: 1;
            }
    
        </style>
    </head>
    <body>
        <div class="container">
            <div class="text-wrapper">
                <div class="more">...</div>
                <div class="content"> 当地时间8日晚,巴黎奥运会举重项目男子73公斤级比赛,第三次出战奥运会的老将石智勇在抓举以165公斤排名第一,但在之后的挺举三次试举191公斤失败,遗憾无缘奖牌。赛后石智勇流下不甘的泪水,他透露:“挺举第一把可能还是有点着急,第二把没举起来有点懵,第三把内收肌可能断了,我听到‘啪’的一声。”</div>
            </div>
        </div>
    </body>
    </html>
    

    相关文章

      网友评论

          本文标题:你不知道的省略号

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