css实现文本内容超出长度隐藏,显示省略号——(单行，多行)

1，超出换行.div{height:auto;word-wrap: break-word; /*强制换行*/}2，超出显示省略号、单行文本隐藏。.div{width: 300px;height: auto;word-wrap: break-word; /*强制换行*/overflow: hidden; /*超出隐藏*/text-overflow: ellipsis;/*隐藏后添加省略号*/whit

qwyio

23606人浏览 · 2022-03-27 15:47:37

qwyio · 2022-03-27 15:47:37 发布

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; //想显示多少行
}