文本超过单行/多行时显示省略号

最新推荐文章于 2022-04-06 16:30:49 发布

siriva

最新推荐文章于 2022-04-06 16:30:49 发布

阅读量611

点赞数 1

文章标签： css 文本超出超出一行超出多行

本文链接：https://blog.csdn.net/rosemarryTop/article/details/53898930

版权

写页面的时候会遇到当内容超出一行或多行时要裁切超出部分并显示省略号的情况，这里简单记录一下：

一行：

text-overflow：ellipsis；当对象内文本溢出时显示省略标记

overflow:hidden；用于css隐藏超出内容

white-space: nowrap；无论内容有多少，都不会自动换行（若不隐藏，则会超出父容器一排全部显示）

多行：

-webkit-line-clamp：4 ；限制文本显示4行

display: -webkit-box；对象作为弹性伸缩盒子模型显示。

-webkit-box-orient：vertical；设置或检索伸缩盒对象的子元素的排列方式。

text-overflow: ellipsis;在多行文本的情况下，用省略号隐藏超出范围的文本。

上代码:

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>文本超过单行/多行时显示省略号</title>
    <style>
        #contain1{
            width: 300px;
            margin:20px auto;
            border: 2px solid red;
            white-space:nowrap;
            overflow:hidden;
            text-overflow:ellipsis;
        }
        #contain2{
            width: 300px;
            border: 2px solid blue;
            margin:20px auto;
            overflow : hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp:4;
            -webkit-box-orient: vertical;
        }
    </style>
</head>
<body>
<div id="contain1">
    我常想在纷扰中寻出一点闲静来，然而委实不容易。目前是这么离奇，心里是这么芜杂。
</div>
<div id="contain2">
    我常想在纷扰中寻出一点闲静来，然而委实不容易。目前是这么离奇，心里是这么芜杂。
    一个人做到只剩了回忆的时候，生涯大概总要算是无聊了罢，但有时竟会连回忆也没有。中国的做文章有轨范，世事也仍然是螺旋。
</div>

</body>
</html>