美文网首页
css怎么设置超出显示省略号

css怎么设置超出显示省略号

作者: 扶得一人醉如苏沐晨 | 来源:发表于2024-01-15 10:28 被阅读0次

css设置超出显示省略号可分两种情况

  • 单行文本溢出显示省略号...
  • 多行文本溢出显示省略号...

但使用的核心代码是一样的:需要先使用overflow:hidden;来把超出的部分隐藏,然后使用text-overflow:ellipsis;当文本超出时显示为省略号。

一、单行文本超出部分显示省略号

image.png
.one-line{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap
}

二、多行文本超出部分显示省略号

image.png
.two-line{
  overflow:hidden;
  text-overflow: ellipsis;
  display:-webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient:vertical;
  -moz-box-orient:vertical;
  word-break: break-all;
}

可以使用CSS的text-overflow和ellipsis属性来实现文本超过2行时显示省略号。

设置文本溢出隐藏

使用CSS的overflow属性来将文本溢出部分隐藏,同时使用white-space属性来设置文本换行方式为normal或者nowrap。

使用CSS的text-overflow属性来设置文本超过2行后显示省略号。同时,需要设置宽度和高度来控制文本显示的区域。

.ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  /* 设置宽度和高度 */
  width: 200px;
  height: 40px;
}

上述代码中,-webkit-line-clamp属性设置为2表示最多显示2行文本,-webkit-box-orient属性设置为vertical表示文本垂直排列。注意这里使用了CSS3的属性,需要在不同浏览器中加上不同的前缀。

相关文章

网友评论

      本文标题:css怎么设置超出显示省略号

      本文链接:https://www.haomeiwen.com/subject/fhbxodtx.html