css文字超出用省略号显示

最新推荐文章于 2024-02-27 14:31:14 发布

小白前端攻城狮

最新推荐文章于 2024-02-27 14:31:14 发布

阅读量275

点赞数 1

文章标签： css css3 html5 Powered by 金山文档

本文链接：https://blog.csdn.net/m0_54104677/article/details/128923400

版权

css文字超出用省略号显示

单行文字

//1.文字默认超出换行显示（默认normal自动换行），所以我们要强制一行显示
  white-space: nowrap;
//2.超出部分隐藏
 overflow: hidden;
//3.用省略号代替超出文本
text-overflow: ellipsis;

多行文字

  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
//限制在一个块元素显示的文本的行数
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;

注意：只是指明行数超出文本用省略号省略，下面举个例子说明一下

例如：

   .box {
        width: 200px;
        height: 80px;
        background-color: pink;
    }

 <div class="box">
        我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字
  </div>

显示结果如下

加上多行文字省略代码后

    .box {
        width: 200px;
        height: 80px;
        background-color: pink;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
    }

结果变成这样了，只是第二行文字出行省略号，第三行不会消失