likes
comments
collection
share

css文本显示省略号

作者站长头像
站长
· 阅读数 18

使用css使文本显示省略号

<div>
  你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好
  你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好
  你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好
  你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好
  哈哈哈哈哈
</div>

单行文本:

css文本显示省略号

div {
  white-space:nowrap;
  text-overflow:ellipsis;
  overflow:hidden;
}

多行文本:

IE不支持 (如果强制要求兼容IE建议离职。。。)css文本显示省略号

div{
  display: -webkit-box;
  overflow:hidden;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}