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

最新推荐文章于 2024-08-17 14:58:02 发布

朽木自雕xmzd

最新推荐文章于 2024-08-17 14:58:02 发布

阅读量851

点赞数

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

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

版权

前端专栏收录该内容

107 篇文章 2 订阅

订阅专栏

效果图如下：

代码部分：

<!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>