css实现多行文字截断

最新推荐文章于 2021-05-30 21:08:17 发布

weixin_34096182

最新推荐文章于 2021-05-30 21:08:17 发布

阅读量159

点赞数

原文链接：https://juejin.im/post/5be24f0751882517180c21ee

版权

法一、

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*只适用于单行*/
        div{
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
    </style>
</head>
<body>
    <div>
        看似十分简单的标题截断效果，但是竟然没有一个统一 CSS 属性实现标准，需要用到一些奇淫妙计来实现，一般来说，在做这样文字截断效果时我们更多是希望：
        兼容性好，对各大主流浏览器有好的支持,响应式截断，根据不同宽度做出调整,文本超出范围才显示省略号，否则不显示省略号,省略号位置显示刚好,基于上述的准则，下面我就讲介绍各种技巧实现截断效果，并根据上述的评判标准得出最优解(代码我都传到 jsfiddle 平台，可点击 demo 地址查看)。
    </div>

</body>
</html>复制代码

二、

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            /*将对象作为弹性伸缩盒子模型显示*/
            display: -webkit-box;
            overflow: hidden;
            /*-webkit-line-clamp不是一个规范的属性，只有chrome浏览器支持，兼容性不好，适用于移动端，因为移动设备浏览器更多是基于webkit内核*/
            -webkit-line-clamp:2;
            /*设置或检索伸缩盒对象的子元素的排列方式*/
            -webkit-box-orient: vertical;
        }
    </style>
</head>
<body>
    <div>
        看似十分简单的标题截断效果，但是竟然没有一个统一 CSS 属性实现标准，需要用到一些奇淫妙计来实现，一般来说，在做这样文字截断效果时我们更多是希望：
        兼容性好，对各大主流浏览器有好的支持,响应式截断，根据不同宽度做出调整,文本超出范围才显示省略号，否则不显示省略号,省略号位置显示刚好,基于上述的准则，下面我就讲介绍各种技巧实现截断效果，并根据上述的评判标准得出最优解(代码我都传到 jsfiddle 平台，可点击 demo 地址查看)。
    </div>

</body>
</html>复制代码

三、

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        //该方法兼容性好
        p{
            position: relative;
            line-height: 18px;
            height: 36px;
            overflow: hidden;
        }
        p::after{
            content: "...";
            font-weight: bold;
            position: absolute;
            bottom: 0;
            right: 0;
            padding: 0 20px 1px 45px;
            background: -webkit-gradient(linear, left top, right top,
            from(rgba(255, 255,255,0)), to(white), color-stop(50%, white));
            background: -moz-linear-gradient(to right, rgba(255, 255, 255, 0), white 50%, white);
            background: -o-linear-gradient(to right, rgba(255,255,255,0), white 50%, white);
            background: -ms-linear-gradient(to right, rgba(255,255,255,0), white 50%, white);
            background: linear-gradient(to right, rgba(255,255,255,0), white 50%, white);

        }

    </style>
</head>
<body>
    <div>
        <p>
            看似十分简单的标题截断效果，但是竟然没有一个统一 CSS 属性实现标准，需要用到一些奇淫妙计来实现，一般来说，在做这样文字截断效果时我们更多是希望：
            兼容性好，对各大主流浏览器有好的支持,响应式截断，根据不同宽度做出调整,文本超出范围才显示省略号，否则不显示省略号,省略号位置显示刚好,基于上述的准则，下面我就讲介绍各种技巧实现截断效果，并根据上述的评判标准得出最优解(代码我都传到 jsfiddle 平台，可点击 demo 地址查看)。
        </p>
    </div>

</body>
</html>复制代码

weixin_34096182

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css实现多行文字截断

法一、&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Title&lt;/title&gt; &lt;style&gt; /*只适用于单行*/ div{
复制链接

扫一扫