css文本溢出显示省略号,
单行文
<div class="test"> asadsadsadsasadasdsadadasa</div>
<pre name="code" class="html"> .test{
width: 50px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
省略号要和文字底部对齐 得是微软雅黑,宋体不行的,默认字体,firefox是下对齐,chrome不是
多行文本
<div class="test1"> asadsadsadsasadasdsadadasaasadsadsa
dsasadasdsadadasaasadsadsadsasadasdsadadasaasadsadsadsasadasdsadadasaa
sadsadsadsasadasdsadadasaasadsadsadsasadasdsadadasa</div>
.test1{
height: 60px;
width: 50px;
display: -webkit-box;
display: -moz-box;
overflow: hidden;
text-overflow: ellipsis;
word-break: break-all;
-webkit-box-orient: vertical;
-webkit-line-clamp:3;
}
line-clamp firefox占不支持 适合用于移动端