css设置超过长度的以省略号显示

发布时间：2023/06/09 20:10:32 浏览次数：689

1.一行中超出固定长度的部分以省略号显示

 
#div1{
    width: 100px;   
    overflow: hidden;        /*内容会被修剪，并且其余内容是不可见的*/
    text-overflow:ellipsis;  /*显示省略符号来代表被修剪的文本。*/
    white-space: nowrap;     /*文本不换行*/
}

2.多行中超出固定行数的部分显示省略号

#div2 {
      width: 100px;
      display: -webkit-box;   /*必须结合的属性,将对象作为弹性伸缩盒子模型显示*/
      -webkit-line-clamp: 3;  /*设置多少行*/
      -webkit-box-orient: vertical;   /*必须结合的属性,设置或检索伸缩盒对象的子元素的排列方式*/
      overflow: hidden;   /*文本会被修剪，并且剩余的部分不可见*/
      text-overflow: ellipsis;   /*显示省略号来代表被修剪的文本*/
}

转载于大佬

您可能还会喜欢：

css 省略
如何给网站一键变黑？如哀悼日，一行css代码解决
JavaScript，jQuery 的css方法无效是怎么回事
用 CSS 隐藏页面元素的 5 种方法
CSS在线压缩工具
CSS在线压缩工具