前端单行省略号和多行省略号

初级的CV工程师

已于 2022-03-31 12:50:05 修改

阅读量2.9k

点赞数 4

文章标签： css 前端 javascript

于 2022-03-23 12:41:29 首次发布

本文链接：https://blog.csdn.net/m0_45219210/article/details/123683069

版权

单行省略号:

      text-overflow: ellipsis;//溢出用省略号显示
      white-space: nowrap;//不换行
      overflow: hidden;//溢出隐藏

效果如下：

多行省略号:

    display: -webkit-box;//将对象作为弹性伸缩盒子模型显示
    -webkit-box-orient: vertical;//从上到下垂直排列子元素(设置伸缩盒子的子元素的排列方式)
    text-overflow: ellipsis;//溢出用省略号显示
    overflow: hidden;//超出的文本隐藏
    -webkit-line-clamp: 7;//表明7行文本显示省略号,这里要根据自身需求进行设置

下图既有单行的效果，又有多行的效果