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

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

.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;

 

posted @ 2017-05-22 15:24  WEB1010113045  阅读(147)  评论(0编辑  收藏  举报