首页 > 其他 > 详细

控制文字行数以及用省略号代替被修剪文本

时间:2017-05-22 16:30:21      阅读:279      评论:0      收藏:0      [点我收藏+]

在文字内容很多的情况下,且这些内容还会影响到盒子大小,这时候我们就需要限制盒子宽和高,但内容的显示又不是很美观,这时候我们就可以通过以下这些代码来修饰内容显示效果

.content{
	width:100%;
	height: 34px;
        overflow: hidden;
        text-overflow: -o-ellipsis-lastline;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
}

width:100%;-----盒子的宽度

height:34px;-----盒子的高度(跟显示几行有关系)

overflow:hidden;-----内容超出隐藏

text-overflow:-o-ellipsis-lastline;

text-overflow:ellipsis;-----显示省略符号来代表被修剪的文本。

display:-webkit-box;

-webkit-line-clamp:2;-----限制几行

-webkit-box-orient:vertical;

 

控制文字行数以及用省略号代替被修剪文本

原文:http://www.cnblogs.com/qq1010113045/p/6889668.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!