CSS文字溢出问题

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            /*文字溢出问题*/
            
            .wordNowrap {
                width: 50%;
                height: 500px;
                margin: 0 auto;
                background: tan;
            }
            /*单行溢出···*/
            .singleLine {
                width: 300px;
                height: 50px;
                background: teal;
                /*单行溢出···*/
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
            }
            /*多行溢出···*/
            .moreLine {
                width: 00px;
                height: 60px;
                line-height: 30px;
                /*将height的高度值设置为line-height的值的2倍 以防多出的文字漏出*/
                background: paleturquoise;
                display: -webkit-box;
                overflow: hidden;
                -webkit-line-clamp: 2;
                -webkit-box-orient: vertical;
            }
            .moreLine_box{
                width: 360px;
                height: 60px;
            }
            /*多行后面···虚化*/
            .moreLine_after {
                width: 360px;
                /*将height的高度值设置为line-height的值的2倍 以防多出的文字漏出*/
                height: 60px;
                line-height: 30px;
                overflow: hidden;
                position: relative;
                background: #fff;
                padding: 30px;
            }
            
            .moreLine_after::after {
                position: absolute;
                content: "...";
                bottom: 0;
                right: 20px;
                background: linear-gradient(left, transparent, #eee 55%);
                background: -webkit-linear-gradient(left, transparent, #eee 55%);
                background: -moz-repeating-linear-gradient(left, transparent, #eee 55%);
                background: -moz-repeating-linear-gradient(left, transparent, #eee 55%);
                padding-left: 20px;
            }
        </style>
    </head>
    <body>
        <div class="wordNowrap">
            <h2>文字溢出处理</h2>
            <p class="singleLine">单行 撒旦发所多撒多撒多撒多撒多撒多撒多撒翁翁群翁无群二</p>
            <p class="moreLine">
                多行 撒旦发所多撒多撒多撒多撒多撒多撒多撒翁翁群翁无群二 多行 撒旦发所多撒多撒多撒多撒多撒多撒多撒翁翁群翁无群二 多行 撒旦发所多撒多撒多撒多撒多撒多撒多撒翁翁群翁无群二 多行 撒旦发所多撒多撒多撒多撒多撒多撒多撒翁翁群翁无群二 多行 撒旦发所多撒多撒多撒多撒多撒多撒多撒翁翁群翁无群二
            </p>
            <div class="moreLine_box">
                <p class="moreLine_after">
                    多行末尾虚化 撒旦发所多撒多撒多撒多撒多撒多撒多撒翁翁群翁无群二 多行末尾虚化 撒旦发所多撒多撒多撒多撒多撒多撒多撒翁翁群翁无群二 多行末尾虚化 撒旦发所多撒多撒多撒多撒多撒多撒多撒翁翁群翁无群二 多行末尾虚化 撒旦发所多撒多撒多撒多撒多撒多撒多撒翁翁群翁无群二 多行末尾虚化 撒旦发所多撒多撒多撒多撒多撒多撒多撒翁翁群翁无群二
                </p>
            </div>
        </div>
    </body>
</html>
当前页面是本站的「Google AMP」版。查看和发表评论请点击：完整版 »