省略号的多行和单行的省略号显示。。。。。

来源：互联网发布：知彼而知己是什么意思编辑：程序博客网时间：2024/05/17 15:37

上代码:

<!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>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37

预览显示：
预览图片

一行：

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

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

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

多行：

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

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

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

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

0 0