CSS小技巧——2.让多余的文本隐藏并用省略号显示

我们经常能在网页中碰到这样的情况，如果字数很多显示不开的时候，这时候我们就通过css限制一下，将后面的文字隐藏起来，并且用省略号结尾。如下图所示

小编这里有一个列表，生成的效果如上图，由于我们设定了ul外面盒子的大小，所以字数多的第一条和最后一条的文字会显示不开。

<ul>
   <li><a href="#">[特惠] 备战开学季 全民半价购数码 先到先得</a></li>
   <li><a href="#">[公告] 品优购稳占家电网购六成份额</a></li>
   <li><a href="#">[特惠] 百元中秋礼品限量领取</a></li>
   <li><a href="#">[公告] 上品优生鲜 享阳澄湖大闸蟹</a></li>
   <li><a href="#">[特惠] 每日享折扣,新鲜好礼享不完，最后一日</a></li>
</ul>

那么我们可以通过在css中设置一下这个li，具体代码如下所示：

ul li {
  width: 250px;
  height: 24px;
  /* 下面这五个是让多余的文字显示成省略号 */
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  /* 控制显示的行数*/
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
}

ellipsis就是省略号的意思，具体原理如果了解，可以去搜索教程，我就不赘述了，其实我们只要记住就可以了，下次用的时候直接复制粘贴就好（来自懒人的提议）。