css实现文本超出部分省略号显示

2018-10-26 本文已影响0人今天不瞌睡

我们经常会遇到标题或者罗列项字数很多，而盒子宽度有限的情况，这时为了美观就需要控制显示文本。
具体实现代码如下：

style {
  overflow: hidden;
  width:100px;/* 这里可以用max-width: ;加min_width:;自适应*宽度布局/
  text-overflow:ellipsis;
  white-space: nowrap;
}

当然，以上只是单行的文本超出控制，有时候会碰到需要多行文本控制显示的，这列我们会用到一个webkit的css扩展属性，该方法适用于webkit浏览器和移动端的显示；
具体代码如下：

max-width:300px;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;

效果如下：

1540523622(1).png