1. 單行文本溢出顯示省略號

<div class="ellipsis">
  css實現(xiàn)文本溢出顯示省略號css實現(xiàn)文本溢出顯示省略號css實現(xiàn)文本溢出顯示省略號
</div>

.ellipsis {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  width: 300px;
  color: red
}

查看Demo

2. 多行文本溢出顯示省略號

<div class="ellipsis">
  css實現(xiàn)文本溢出顯示省略號css實現(xiàn)文本溢出顯示省略號css實現(xiàn)文本溢出顯示省略號
    css實現(xiàn)文本溢出顯示省略號css實現(xiàn)文本溢出顯示省略號css實現(xiàn)文本溢出顯示省略號
</div>

.ellipsis {
  display: -webkit-box;
  overflow: hidden;
  text-overflow: ellipsis;
  word-break: break-all;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  width: 300px;
  color: red
}

查看Demo
注：
-webkit-line-clamp用來限制在一個塊元素顯示的文本的行數(shù)。為了實現(xiàn)該效果，它需要組合其他的WebKit屬性。常見結合屬性：
display: -webkit-box：必須結合的屬性，將對象作為彈性伸縮盒子模型顯示。
-webkit-box-orient：必須結合的屬性，設置或檢索伸縮盒對象的子元素的排列方式。
適用范圍：

7a3902ade9e761c43e485851582fb7c4.png