css3 多行文本 溢出 省略号

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占不支持  适合用于移动端