相信大家也开始接触移动端的项目了，移动端兼容各种设备想必让你也头疼吧。不过移动端也有它好的一面，就是可以用比较新的css3属性了，从而在布局上面来说也是福音。下面就说的就是文字内容超出就用省略号代替的问题，相信大家在PC端都知道多换文字是无法实现内容超出就用省略号显示的，多半是用字符串截取的方式了。那移动端就可以结合css3来实现，下面的例子就是多行内容如果没有显示全就用省略号代替了。
当内容如果2行内还未显示全就用省略号替代了。
实现代码：
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
| <!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>指定内容超过多少行还未显示完就用省略号代替</title>
<style type="text/css">
.box{
padding-top: 2px;
line-height: 21px;
display: -webkit-box;
-webkit-line-clamp: 6;
word-wrap: break-word;
word-break: break-all;
overflow: hidden;
text-overflow: ellipsis;
-webkit-box-orient: vertical;
}
</style>
</head>
<body>
<div style="height:100px;"></div>
<div class="box">
现场照片显示，一名身着浅色上衣的男子倒在怀化市人民检察院检务接待中心楼下的血泊中，落地的位置紧挨检务接待中心大门，男子侧躺地上，现场留下一滩血迹。
中新网5月14日电 针对台湾老牌歌手陈升有关反对服贸协议等相关言论，国台办发言人马晓光在今天的例行记者会上指出，这种极端言论不能代表台湾大多数民众的想法，也不会为大多数大陆民众所接受。
有记者问发言人：之前有媒体报道说，台湾老牌歌手陈升日前声称反对服贸协议，并说他“已经把大陆市场封杀”，还认为陆客不需要再去台湾，请问发言人对此有何看法？
马晓光指出，我们注意到，我想，这种极端的言论不能代表台湾大多数民众的想法，也不会为大多数大陆民众所接受。任何人都不能剥夺两岸同胞相互往来和交流的权利。
</div>
</body>
</html>
|