css文字超出用省略号显示

最新推荐文章于 2025-04-27 16:54:52 发布

小白前端攻城狮

最新推荐文章于 2025-04-27 16:54:52 发布

阅读量355

点赞数 1

文章标签： css css3 html5

本文链接：https://blog.youkuaiyun.com/m0_54104677/article/details/128923400

版权

文章介绍了如何使用CSS样式来实现单行和多行文字超出隐藏并显示省略号的效果。对于单行文字，关键样式包括`white-space:nowrap`,`overflow:hidden`和`text-overflow:ellipsis`。而对于多行文字，利用`-webkit-line-clamp`和`-webkit-box`属性可以限制显示的行数并添加省略号。示例代码展示了在不同设置下的显示效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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;
    }

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