ellipsis 一行/两行省略

最新推荐文章于 2024-05-19 23:05:56 发布

_Nana_

最新推荐文章于 2024-05-19 23:05:56 发布

阅读量1.1k

点赞数

分类专栏： CSS 实际开发问题文章标签： CSS ellipsis 省略

本文链接：https://blog.youkuaiyun.com/Nana_9457/article/details/83274455

版权

实际开发问题同时被 2 个专栏收录

20 篇文章

订阅专栏

CSS

8 篇文章

订阅专栏

<!DOCTYPE html>
<html>
<head>
    <style type="text/css">
        /* 一行 */
        .test {
            text-overflow:ellipsis;
            overflow:hidden;
            white-space:nowrap;
            width:150px;
        }
        /* 两行 */
        .test {
            display: -webkit-box;
            overflow: hidden;
            /*text-overflow: ellipsis;*/
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
        }
    </style>
</head>
<body>
    <div class="test">关于**产品的推广关于**产品的推广关于**产品的推广</div>
</body>
</html>