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>

效果如图所示：