上代码:
<!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;在多行文本的情况下,用省略号隐藏超出范围的文本。