css中控制文本超出内容变省略号

超出的文字变省略号

单行文本超出文字显示省略号

很多时候在文本中数据不换行的情况下，我们都要通过css来控制文本内容超出省略。首先下面是核心代码:

overflow:hidden;
white-space:nowrap;
text-overflow:ellipsis;

下面进行单个语句的说明：

overflow:hidden;

overflow属性规定当内容溢出元素框时发生的事情。有如下属性值：

值	描述
visible	默认值。内容不会被修剪，会呈现在元素框之外。
hidden	内容会被修剪，并且其余内容不可见。
scroll	内容会被修剪，但是浏览器会显示滚动条以便查看其余内容。
auto	如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
inherit	规定应该从父元素继承overflow属性的值。

不过auto和scroll的区别是：scroll不管文本内容有没有超过元素框都会有滚动条而auto只有文本内容超过元素框的时候才会有滚动条。

white-space:nowrap；

white-space 属性设置如何处理元素内的空白。有如下属性值：

值	描述
normal	默认。空白会被浏览器忽略。
pre	空白会被浏览器保留。其行为方式类似 HTML 中的 标签。
nowrap	文本不会换行，文本会在在同一行上继续，直到遇到 标签为止。
pre-wrap	保留空白符序列，但是正常地进行换行。
pre-line	合并空白符序列，但是保留换行符。
inherit	规定应该从父元素继承 white-space 属性的值。

text-overflow:ellipsis;

text-overflow 属性规定当文本溢出包含元素时发生的事情。

值	描述
clip	修剪文本。
ellipsis	显示省略符号来代表被修剪的文本。
string	使用给定的字符串来代表被修剪的文本。

总结：

• 首先通过overflow:hidden;设置将超出的文本内容隐藏
• 然后通过white-space:nowrap;设置文本不换行
• 最后通过text-overflow:ellipsis;设置省略号替代超出隐藏的文本内容

bingo，单行超出的文本内容就设置成省略号啦！

多行文本超出文字显示省略号

直接使用css设置属性（注意：只有-webkit内核才有作用），核心代码如下：

  overflow: hidden;
  text-overflow: ellipsis; 
  -webkit-line-clamp: 2;
  display: -webkit-box;
  -webkit-box-orient: vertical;

和单号一样的在这就不多说了，下面说明一下和单行不同的地方：

• -webkit-line-clamp用来限制在一个块元素显示的文本的行数。为了实现该效果，它需要组合其他的WebKit属性。
• display: -webkit-box; 必须结合的属性 ，将对象作为弹性伸缩盒子模型显示 。
• -webkit-box-orient 必须结合的属性 ，设置或检索伸缩盒对象的子元素的排列方式 。