html文字超过部分显示为省略号

╰+哭是因爲堅強的太久メ 2022-07-03 12:23 326阅读 0赞

为了保证页面的整洁美观，在很多的时候，我们常需要隐藏超出长度的文字。这在列表条目，题目，名称等地方常用到。

(1).文字超出一行，省略超出部分，显示’…’  
如果这种情况比较多，可以取一个切合作用的类名用于复用。

.line-limit-length {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap; //文本不换行，这样超出一行的部分被截取，显示...
    }
    <div class="item">
        <p class="line-limit-length">最新消息：神秘地球黑洞深不可测，不停吸入周围海水。</p>
        <i class="icon icon-arrow-Go"></i> //图标字体
    </div>

(2). 可以给定容器宽度限制，超出部分省略

.product-buyer-name { max-width: 110px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

##### 橘子橘子 #####

![这里写图片描述][SouthEast]

##### 橘子橘子匿名用户匿名 #####

![这里写图片描述][SouthEast 1]  
3、html文字超过两行或三行就显示省略号

<!DOCTYPE html >
    <html >
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <title>文字超过两行或三行就显示省略号</title>
    <style type="text/css"> .p1{ overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; } </style>
    </head>
    <body>
    <p class="p1">
    动机客户赶快交电话费开发将对方很高科技的化工科技和登记客户对方更好看的恢复规划的国际化考核得分科技化工等客观和登记和高科技好读后感京东框架读后感动机客户赶快交电话费开发将对方很高科技的化工科技和登记客户对方更好看的恢复规划的国际化考核得分科技化工等客观和登记和高科技好读后感京东框架读后感动机客户赶快交电话费开发将对方很高科技的化工科技和登记客户对方更好看的恢复规划的国际化考核得分科技化工等客观和登记和高科技好读后感京东框架读后感动机客户赶快交电话费开发将对方很高科技的化工科技和登记客户对方更好看的恢复规划的国际化考核得分科技化工等客观和登记和高科技好读后感京东框架读后感
    </p>
    </body>
    </html>

![超过三行省略号·显示][SouthEast 2]

[SouthEast]: /images/20220618/27d74454708e4217bde0a36b66cecf67.png
[SouthEast 1]: /images/20220618/23dfcef704a84571ba43ad49f41e63e6.png
[SouthEast 2]: /images/20220618/8917422a69464f29ae003ebdce38f0ed.png