开辟html5和css3学习随笔（2015-3-2）

1.移动端超出指定行数隐藏并显示省略号

<!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;/*指定内容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>

类似显示结果：

posted @ 2015-03-02 11:19  还能再菜点吗？  阅读(142)  评论(0)  编辑  收藏  举报