一、單行文字溢出顯示省略號

{overflow:hidden; text-overflow:ellipsis; white-space:nowrap；}

**三個屬性必須一起使用，其中ellipsis是省略號效果，這種方式只適合單行文本。效果如

二、多行文字溢出顯示省略號

利用WebKit的CSS擴(kuò)展屬性，該方法適用于WebKit瀏覽器及移動端；

{display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:3; overflow:hidden;}

1、-webkit-line-clamp限制在一個塊元素中文本顯示的行數(shù)。它需要組合其他的WebKit屬性。常見結(jié)合屬性：

2、display:-webkit-box;必須結(jié)合的屬性，將對象作為彈性伸縮盒子模型顯示。

3、-webkit-box-orient必須結(jié)合的屬性，設(shè)置或檢索伸縮盒對象的子元素的排列方式。

 display: -webkit-box;
  overflow: hidden;
  white-space: normal;
  text-overflow: ellipsis;
  word-wrap: break-word;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;

三、這是網(wǎng)上一個大神的一個方法，比較炫酷

.nr .text{position: relative; line-height: 20px; max-height:120px;overflow: hidden;}

.text:after{

content: "....";color:#000; position: absolute; bottom: 0; right: 0; padding-left:60px;

background: -webkit-linear-gradient(left, transparent, #C4E2D870%);

background: -o-linear-gradient(right, transparent, #C4E2D8 70%);

background: -moz-linear-gradient(right, transparent, #C4E2D8 70%);

background: linear-gradient(to right, transparent,#C4E2D8 70%);

}

**注意

1、將height設(shè)置為line-height的整數(shù)倍，防止超出的文字露出。

2、給 .text:after 添加漸變背景可避免文字只顯示一半。

3、4個background是一個意思，一個效果，只是為了兼容不同瀏覽器；常用瀏覽器使用最后一個background就可以了。

word-break:break-all;讓單詞折斷

word-wrap: break-word;讓英文換行

總結(jié)

以上是生活随笔為你收集整理的三种实现单行、多行文本溢出显示省略号…的方法的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。