怎麼用css實現多行文本省略？

效果圖

解決方案

<div class="demo">
  CSS實現多行文本溢出顯示省略號CSS實現多行文本溢出顯示省略號CSS實現多行文本溢出顯示省略號CSS實現多行文本溢出顯示省略號CSS實現多行文本溢出顯示省略號CSS實現多行文本溢出顯示省略號
</div>

.demo {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
  width: 200px;
  border: 1px solid #ccc;
}

1.-webkit-box-orient: vertical：指定子元素按垂直方向排列。

2.-webkit-line-clamp: 3：能夠限制塊元素中文本的顯示行數。這裏顯示3行。

3.適用範圍：該方法適用於Webkit瀏覽器及移動端。

示例代碼下載

能夠複製以上代碼運行查看使用效果，也能夠到GitHub: https://github.com/Jackyyans/code123下載，更多示例將會持續更新，歡迎關注。