css实现文字占两行

zqz123321_

已于 2022-07-13 10:34:58 修改

阅读量2.9k

点赞数

分类专栏： css 文章标签： css

于 2022-07-13 10:22:01 首次发布

本文链接：https://blog.csdn.net/zqz123321_/article/details/125758391

版权

css 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

  text-overflow: -o-ellipsis-lastline;

  overflow: hidden;

  text-overflow: ellipsis;

  display: -webkit-box;

  -webkit-line-clamp: 2;

  line-clamp: 2;

  -webkit-box-orient: vertical;

未使用之前

<!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>
        * {
            margin: 0;
            padding: 0;
        }
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
        }

        .father {
            width: 200px;
            border: 1px solid burlywood;
        }
    </style>
</head>

<body>
    <div class="father">这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字</div>
</body>

</html>

使用之后

<!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>
        * {
            margin: 0;
            padding: 0;
        }
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
        }

        .father {
            width: 200px;
            border: 1px solid burlywood;
        }

        .two {
            text-overflow: -o-ellipsis-lastline;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            line-clamp: 2;
            -webkit-box-orient: vertical;
        }
    </style>
</head>

<body>
    <div class="father two">这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字这是测试文字</div>
</body>

</html>