CSS控制文字顯示一行，超出顯示省略號

時間 2019-12-14

標籤 css 控制文字顯示一行超出省略號欄目 CSS 简体版

原文原文鏈接

這幾天在項目需求裏面遇到了不少以前沒作過的需求，也慢慢更加認識到了css的強大，是真的強大。之後會把本身技術調研的東西都寫出來，哪怕只是一點點或者很小的點，重在學習。css

「CSS控制文字顯示一行，超出顯示省略號」，我本身作的時候，由於場景的div寬度是固定的，我就直接截取了文本的前 X 個字符顯示，相似於這樣：html

str = str.slice(0,10) +"……"';

其實這樣作有很大的弊端，網站每次數據刷新的時候，都要這樣作一次，最後發現能夠用css實現，以下所示：svg

<!DOCTYPE html>
<html>
<head>
    <title>CSS控制文字顯示一行，超出顯示省略號</title>
    <style type="text/css">
        .text-line{
            height: 100px;
            background-color: #AAA8A8;
            display: inline-block;
            /*下面是必需的*/
            width: 100px;
            color: #000;
            white-space: nowrap;/*把文本強制顯示在一行*/
            overflow: hidden;/*隱藏超出部分的文字*/
            text-overflow: ellipsis;/*超出顯示省略號*/
        }
    </style>
</head>
<body>
    <div class="text-line">超出一行只顯示部分，後面的顯示省略號…，利用css實現，而不是本身去判斷留多少個字</div>
</body>
</html>

最近還發現了 css 的 content 屬性，還有一些 .svg 的 icon 能夠直接修改.svg 中的 fillColor 來實時改變圖標樣式顏色，還有一些資源壓縮工具，仍是得好好學習，要學的東西太多了。工具

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。