CSS實現單行文本和多行文本溢出時顯示省略號...

單行文本溢出

實現效果通過使用以下屬性：

white-space:nowrap; //不換行
overflow:hidden; //溢出的部分隱藏
text-overflow:ellipsis; //溢出的部分顯示爲...

具體代碼：

<style>
p{
  width:300px;
  line-height:50px;
  border:1px solid red;
  /*單行文本溢出*/
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
</style>
<p>這是一段文字這是一段文字這是一段文字這是一段文字</p>

效果如圖所示：

多行文本溢出

實現效果通過使用以下屬性：

display: -webkit-box; //彈性盒子
-webkit-box-orient: vertical; //彈性盒子的子元素的排列方式
-webkit-line-clamp: 4; //設置顯示文本的行數
overflow: hidden; //隱藏溢出的部分

具體代碼：

<style>
p{
	width:300px;
    height: 200px;
    line-height:50px;
    border:1px solid red;
    /*多行文本溢出*/
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
    overflow: hidden;
	}
</style>
<p>這是一段文字這是一段文字這是一段文字這是一段文字這是一段文字這是一段文字這是一段文字這是一段文字這是一段文字這是一段文字這是一段文字這是一段文字這是一段文字這是一段文字這是一段文字這是一段文字這是一段文字這是一段文字這是一段文字這是一段文字這是一段文字這是一段文字這是一段文字這是一段文字</p>

效果如圖所示：