css让显示特定行数的文字，多余的文字以省略号显示

最新推荐文章于 2025-06-24 09:47:52 发布

朽木自雕xmzd

最新推荐文章于 2025-06-24 09:47:52 发布

阅读量897

点赞数

CC 4.0 BY-SA版权

分类专栏：前端文章标签：前端 web css 文字溢出省略号

原文链接：http://www.mamicode.com/info-detail-2296753.html

前端专栏收录该内容

107 篇文章

订阅专栏

本文介绍了一种使用CSS实现文本溢出自动隐藏并显示省略号的方法，通过设置特定的样式属性，如width, word-break, text-overflow, display等，确保在限定宽度内文本能够优雅地显示和截断。

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

效果图如下：

代码部分：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .txt{
            width: 200px;
            word-break: break-all;
            text-overflow: ellipsis;
            display: -webkit-box; /** 对象作为伸缩盒子模型显示 **/
            -webkit-box-orient: vertical; /** 设置或检索伸缩盒对象的子元素的排列方式 **/
            -webkit-line-clamp: 2; /** 显示的行数 **/
            overflow: hidden;  /** 隐藏超出的内容 **/
            
            /*1，word-break:break-all 例如div宽200px，它的内容就会到200px自动换行，
            如果该行末端有个英文单词很长（congratulation等），它会把单词截断，
            变成该行末端为conra(congratulation的前端部分)，下一行为tulation（conguatulation）的后端部分了。
            2，word-wrap:break-word 例子与上面一样，但区别就是它会把congratulation整个单词看成一个整体，
            如果该行末端宽度不够显示整个单词，它会自动把整个单词放到下一行，而不会把单词截断掉的。*/
        }
    </style>
</head>
<body>
<p class="txt">溢出文字隐藏溢出文字隐藏溢出文字隐藏溢出文字隐藏溢出文字隐藏溢出文字隐藏溢出文字隐藏溢出文字隐藏</p>
</body>
</html>