ellipsis

by huahua

HTML

<p>
  
  该方法适用范围广，但文字未超出行的情况下也会出现省略号,可结合js优化该方法。

注：

将height设置为line-height的整数倍，防止超出的文字露出。
给p::after添加渐变背景可避免文字只显示一半。
</p>
<span>
  
  该方法适用范围广，但文字未超出行的情况下也会出现省略号,可结合js优化该方法。

注：

将height设置为line-height的整数倍，防止超出的文字露出。
给p::after添加渐变背景可避免文字只显示一半。
</span>

CSS

p ,span{
 text-overflow:ellipsis;
 overflow:hidden;
 white-space:nowrap
}
span{
  display:inline-block;
  width:200px;
}