多行文字溢出[...]的實現(text-overflow: ellipsis)

本文轉載自查看原文 2017-10-17 12:23 10637 text-overflow

聲明：此文章為轉載（點擊查看原文），如有侵權24小時內刪除。聯系QQ：1522025433.

對於單行文字, 很簡單.(詳見css3產考手冊進入)

css:

.oneLine {
    width: 200px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

對於多行文字, 上面的代碼就不適用了. web-kit based 的瀏覽器提供了對這個特殊需求的支持.

css：

.twoLine {  
    overflow: hidden;  
    text-overflow: ellipsis;  
    display: -webkit-box;  
    -webkit-line-clamp: 3;  
    -webkit-box-orient: vertical;  
}

你只要調整-webkit-line-clamp的值就能實現在第n行[...].

下面看一個完整實例：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>多行文本實現超出...</title>
<style type="text/css">
    .twoLine {
        width: 100px;
        height: 100px;
        border: 1px solid red;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 3; /*第三行顯示 ...*/
        -webkit-box-orient: vertical;
    }
</style>
</head>

<body>
<div class="twoLine">測試文本測試文本測試文本測試文本本測試文本測試文本測試文</div>
</body>
</html>

谷歌瀏覽器中的效果：

但是：

對於其他內核的瀏覽器就只能用javascript來hack了.

Vimeo的Joe已經實現了這一功能, 可以參考 https://github.com/josephschmitt/Clamp.js 來詳細了解.

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 html中文字溢出處理（text-overflow）文本溢出text-overflow text-overflow文本溢出隱藏“...”顯示 CSS3：text-overflow實現文字截取，超出部分顯示省略號 text-overflow: ellipsis 在IE8中不能顯示省略號的問題 -webkit-line-clamp 多行文字溢出... flex布局中text-overflow失效的解決方案 -webkit-line-clamp下多行文字溢出點點點... html單行、多行文本溢出隱藏 css3--單行、多行文本溢出