css实现文本内容超出长度隐藏,显示省略号——(单行,多行)[亲测有效]

css实现文本内容超出长度隐藏,显示省略号——(单行,多行)[亲测有效]1,超出换行.div{height:auto;word-wrap:break-word;/*强制换行*/}2,超出显示省略号、单行文本隐藏。.div{width:300px;height:auto;word-wrap:break-word;/*强制换行*/overflow:hidden;/*超出隐藏*/text-overflow:ellipsis;/*隐藏后添加省略号*/white-space:nowrap;/*强制不换行

1,超出换行

.div{
  height:auto;
  word-wrap: break-word; /*强制换行*/
}

2,超出显示省略号、单行文本隐藏。

.div{
  width: 300px;
  height: auto;
  word-wrap: break-word; /*强制换行*/
  overflow: hidden; /*超出隐藏*/
  text-overflow: ellipsis;/*隐藏后添加省略号*/
  white-space: nowrap;/*强制不换行*/
}

3,多行文本隐藏,这里的行数是自己定义的、下面定义的是超出两行隐藏

.div{
  width: 300px;
  height: auto;
  display:-webkit-box;
  overflow: hidden; /*超出隐藏*/
  text-overflow: ellipsis;/*隐藏后添加省略号*/
  -webkit-box-orient:vertical; 
  -webkit-line-clamp:2; //想显示多少行
}

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。
如需转载请保留出处:https://bianchenghao.cn/10714.html

(0)
编程小号编程小号

相关推荐

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注