文本溢出省略（...）

最新推荐文章于 2024-04-18 11:48:16 发布

后栀

最新推荐文章于 2024-04-18 11:48:16 发布

阅读量78

点赞数

分类专栏： css3

本文链接：https://blog.csdn.net/qq_52612197/article/details/114942527

版权

css3 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

单行文本溢出

<!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>
        /* 单行文本溢出（...） */
        div{
            width: 300px;
            height: 100px;
            border: 1px solid #000;
            overflow: hidden;/*溢出隐藏*/
            white-space: nowrap;/*不换行，为单行*/
            text-overflow: ellipsis;/*省略号*/
        }
        
    </style>
</head>
<body>
    <div>
        传说偏僻的礁石后会有美人鱼出现，他便天天去那里等。终于有一天，他看到了那个金黄色头发的，蓝眼睛有着漂亮鱼尾的小美人鱼一从此以后，他便总会去和美人鱼聊聊天，讲一些小美人鱼不懂的东西。这天讲的是《海的女儿》，里面的美人鱼化为了泡，他合上书，对小美人鱼说: 「你有什么想问的吗?」小美人鱼若有所思: 「你刚刚说美人鱼宁愿自己化成泡沫....这是表达喜欢的方式吗?」他想了想，点头: 「我觉得那些破掉的泡沫，里面都是美人鱼没说出口的爱，可是王子听不到了。小美人鱼趴在礁石上，吐出一个超级大的泡泡，然后轻轻一戳这个泡泡摇摇晃晃地飞到他面前，碰了一下他的嘴角啪一 得一声破掉了小美人鱼跃进海里，蓝眼睛定定地望着他: 「那你听到了吗。」
    </div>
</body>
</html>

在这里插入图片描述

多行文本省略

/* 多行文本溢出溢出 */
        div{
            width: 300px;
            height: 40px;
            overflow: hidden;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;/*两行*/
            
        }

-webkit-line-clamp用来限制在一个块元素显示的文本的行数。为了实现该效果，它需要组合其他的WebKit属性。常见结合属性：
display: -webkit-box; 必须结合的属性，将对象作为弹性伸缩盒子模型显示。
-webkit-box-orient :必须结合的属性，设置或检索伸缩盒对象的子元素的排列方式。

用after伪元素

<!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>
       /* 使用after元素 */
        div{
            position: relative;
            width: 300px;
            height: 60px;
            border: 1px solid #ddd;
            overflow: hidden;
        }
        div::after{
            content: "...";
            width: 20px;
            padding: 0 0 0 20px;
            position: absolute;
            bottom: 0;
            right: 0;
            background:linear-gradient(to right,transparent,#fff 50%) ;
        }
    </style>
</head>
<body>
    <div>
        传说偏僻的礁石后会有美人鱼出现，他便天天去那里等。终于有一天，他看到了那个金黄色头发的，蓝眼睛有着漂亮鱼尾的小美人鱼一从此以后，他便总会去和美人鱼聊聊天，讲一些小美人鱼不懂的东西。这天讲的是《海的女儿》，里面的美人鱼化为了泡.....他合上书，对小美人鱼说: 「你有什么想问的吗?」小美人鱼若有所思: 「你刚刚说美人鱼宁愿自己化成泡沫....这是表达喜欢的方式吗?」他想了想，点头: 「我觉得那些破掉的泡沫，里面都是美人鱼没说出口的爱，可是王子听不到了。小美人鱼趴在礁石上，吐出一个超级大的泡泡，然后轻轻一戳这个泡泡摇摇晃晃地飞到他面前，碰了一下他的嘴角啪一 得一声破掉了小美人鱼跃进海里，蓝眼睛定定地望着他: 「那你听到了吗。」
    </div>
</body>
</html>