css中文字过多后添加省略号

Mr.菓菓

于 2022-06-01 02:08:49 发布

阅读量826

点赞数

分类专栏： CSS 文章标签： css css3 前端

本文链接：https://blog.csdn.net/qq_37417446/article/details/125076502

版权

CSS 专栏收录该内容

47 篇文章

订阅专栏

### 单行省略写法：

div{
	/*超出截取*/
    overflow: hidden;
    /*添加省略号*/
    text-overflow: ellipsis;
    /*让文本不换行，强制一行显示*/
    white-space: nowrap;
}

多行省略写法：

div{
       display: -webkit-box;  /*设置为弹性盒子*/
      -webkit-line-clamp: 5;  /*最多显示5行*/
      overflow: hidden;  /*超出隐藏*/
      text-overflow: ellipsis;  /*超出显示为省略号*/
      -webkit-box-orient: vertical;
      word-break: break-all;  /*强制英文单词自动换行*/
}