CSS实现文本显示两行(或者多行)，超过部分用省略号隐藏

hpz1223

已于 2024-03-25 17:51:58 修改

阅读量6.7k

点赞数 15

分类专栏： #CSS系列文章标签： css 前端

于 2024-03-12 19:29:33 首次发布

本文链接：https://blog.youkuaiyun.com/qq_54140719/article/details/136660553

版权

#CSS系列专栏收录该内容

6 篇文章

订阅专栏

文本过长只显示两行，最后一行超出隐藏并显示省略号

效果如图：

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div>qqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqq</div>
</body>
<style>
    div{
        width: 200px;
        overflow:hidden;
        word-wrap: break-word;
        text-overflow:ellipsis;
        display:-webkit-box;
        -webkit-box-orient:vertical;
        -webkit-line-clamp:2;   
    }
</style>
</html>

-webkit-line-clamp:2; 可以控制显示多少行。

如果要求显示一行有简单的写法：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div>qqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqqq</div>
</body>
<style>
    div{
        width: 200px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap; 
    }
</style>
</html>