单、多行文本溢出

最新推荐文章于 2022-10-20 20:18:59 发布

樱桃小丸子~

最新推荐文章于 2022-10-20 20:18:59 发布

阅读量231

点赞数

分类专栏： css

本文链接：https://blog.csdn.net/horizon_26/article/details/77769314

版权

css 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

多行文本溢出

效果图：
这里写图片描述
直接写代码了

单行文本溢出适用于标题
多行文本溢出适用于文章内容

<!DOCTYPE html>
<html lang="zh">

    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <meta http-equiv="X-UA-Compatible" content="ie=edge" />
        <title>Document</title>
        <style type="text/css">
<!DOCTYPE html>
<html lang="zh">

    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <meta http-equiv="X-UA-Compatible" content="ie=edge" />
        <title>Document</title>
        <style type="text/css">
            .inline,
            .intwoline {
                width: 100px;

                display: -webkit-box;
                display: -moz-box;
                overflow: hidden;
                text-overflow: ellipsis;
                word-break: break-all;
                -webkit-box-orient: vertical;
                -moz-box-orient: vertical;
                -webkit-line-clamp: 2;
            }

            .inline {
                -webkit-line-clamp: 1;

            }

        }
        </style>
    </head>

    <body>
        <div >
            <p class="inline">单行文本溢出单行文本溢出单行文本溢出单行文本溢出</p>
        </div>
        <div >
            <p class="intwoline">多234行文溢s7出多行文35本溢出aas多行文本溢出多行文本溢出多行文本溢出多行文本溢出多行文本溢出多行文本溢出多行文本溢出多行文本溢出多行文本溢出多行文本溢出多行文本溢出多行文本溢出</p>
        </div>
    </body>

</html>