单行溢出隐藏没生效_css--文本溢出

1.单行文本溢出：

div{
  border:1px solid red;
  white-space:nowrap;
  overflow: hidden;
  text-overflow:ellipsis;
}

JS Bin​js.jirengu.com

效果：

2.多行文本溢出：

搜：css multi line text ellipsis

div{
    border:1px solid red;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical; 
}

JS Bin​js.jirengu.com

效果：

(1)overflow：hidden是把后面的代码隐藏起来的意思。

(2)-webkit-line-clamp: 3;是指溢出3行的意思，这个数值可以随意改。

注：以上两种方法不兼容IE，如果要兼容IE，自行搜索...