css实现超出固定长度的部分以省略号显示

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

原创最新推荐文章于 2025-04-27 16:54:52 发布 · 4.2k 阅读

10 ·

CC 4.0 BY-SA版权

本文详细介绍了如何使用CSS样式处理文本溢出的情况，包括单行和多行文本的溢出处理，通过实际代码示例展示了如何利用overflow、text-overflow和white-space等属性实现文本的优雅截断。

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;   /*显示省略号来代表被修剪的文本*/
}

3.综合使用：

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        #div1 {
            width: 100px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        #div2 {
            width: 100px;
            display: -webkit-box;
            -webkit-line-clamp: 3;
            -webkit-box-orient: vertical;
            overflow: hidden;
            text-overflow: ellipsis;
        }
    </style>
</head>
<body>
<div id="div1">文本溢出文本溢出文本溢出文本溢出文本溢出文本溢出文本溢出文本溢出文本溢出文本溢出文本溢出</div>
<div id="div2">文本溢出文本溢出文本溢出文本溢出文本溢出文本溢出文本溢出文本溢出文本溢出文本溢出文本溢出</div>
</body>

</html>