css3 多行文本 溢出 省略号

css文本溢出显示省略号,

单行文

css3 多行文本 溢出 省略号

 <div class="test"> asadsadsadsasadasdsadadasa</div>
<pre name="code" class="html">  .test{
    width: 50px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
省略号要和文字底部对齐 得是微软雅黑,宋体不行的,默认字体,firefox是下对齐,chrome不是




多行文本

css3 多行文本 溢出 省略号

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





上一篇:独家经验快速跟进:《零售数据中台通关指南》一起走进零售数据中台


下一篇:一文带你了解企业上云数据分析首选产品Quick BI