文本溢出截斷省略

時間 2020-06-07

標籤文本溢出截斷省略简体版

原文原文鏈接

文本溢出截斷省略

文本溢出截斷省略是比較常見的業務場景，主要分爲單行文本溢出截斷省略與多行文本溢出截斷省略，單行的截斷方案比較簡單，多行截斷相對比較複雜。javascript

單行溢出省略

單行文本溢出截斷省略直接使用CSS便可，其無兼容問題，文本溢出範圍才顯示省略號，不然不顯示省略號，省略號位置顯示恰好，可是隻能做爲單行文本溢出截斷省略的解決方案。css

<section>
    <div class="t1">很長很長很長很長很長很長很長很長的文本</div>
    <div class="t1">不很長的文本</div>
</section>
<style type="text/css">
    .t1{
        white-space: nowrap; /* 文字在一行顯示不能換行 */
        overflow: hidden; /* 文字長度超出限定寬度則截斷 */
        text-overflow: ellipsis; /* 文本溢出時顯示省略符號 */
    }
</style>

多行溢出省略

按行計算 CSS方案

多行文本溢出截斷省略按行計算使用CSS，其文本溢出範圍才顯示省略號，不然不顯示省略號，省略號位置顯示恰好，可是兼容性通常，line-clamp屬性只有WebKit內核的瀏覽器才支持,多適用於移動端頁面，由於移動設備瀏覽器更可能是基於WebKit內核。html

<section>
    <div class="t2">不很長的文本</div>
    <div class="t2">很長很長很長很長很長很長很長很長的很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長的文本</div>
</section>
<style type="text/css">
    .t2{
        -webkit-line-clamp: 3; /* 限制在一個塊元素顯示的文本的行數 兼容性 https://caniuse.com/#search=line-clamp */
        display: -webkit-box; /* 顯示爲彈性伸縮盒子模型 */
        box-orient: vertical; /* 設置伸縮盒對象的子元素的排列方式 */
        overflow: hidden; /* 文字長度超出限定寬度則截斷 */
        text-overflow: ellipsis; /* 文本溢出時顯示省略符號 */
    }
</style>

按行計算 Js方案

多行文本溢出截斷省略按行計算使用Js，其無兼容問題，文本溢出範圍才顯示省略號，不然不顯示省略號，可是須要Js實現，背離展現和行爲相分離原則，文本爲中英文混合時，省略號顯示位置略有誤差。java

<section>
    <div class="t3">不很長的文本</div>
    <div class="t3">很長很長很長很長很長很長很長很長的很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長的文本</div>
</section>
<script type="text/javascript">
    (function(){
        var lineNum = 3;
        var elements = document.getElementsByClassName("t3");
        Array.prototype.forEach.call(elements, element => {
            var text = element.innerText;
            var textLen = text.length;
            var baseWidth = window.getComputedStyle(element).width;
            var fontsize = window.getComputedStyle(element).fontSize;
            var lineWidth = baseWidth.slice(0, -2);
            var charCount = Math.floor(lineWidth / fontsize.slice(0, -2)); // 計算一行內可容納字數
            var content = "";
            var totalStrNum = Math.floor(charCount * lineNum); // 多行可容納總字數
            var lastIndex = totalStrNum - textLen;
            if (textLen > totalStrNum) content = text.slice(0, lastIndex - 3).concat('...');
            else content = text;
            element.innerText = content;
        })
    })();
</script>

按高度計算 CSS方案

多行文本溢出截斷省略按高度計算使用CSS，利用Float的浮動，經過::before與::after兩個僞元素實現浮動操做，其無兼容問題，文本溢出範圍才顯示省略號，不然不顯示省略號，但省略號顯示可能不會剛恰好，有時會遮住一半文字。git

<section>
    <div class="t4">
        <div class="text">不很長的文本</div>
    </div>
    <div class="t4">
        <div class="text">很長很長很長很長很長很長很長很長的很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長的文本</div>
    </div>
</section>
<style type="text/css">
    .t4 {
        max-height: 40px;
        line-height: 20px;
        overflow: hidden;
    }
    .t4::before{
        float: left;
        content:"";
        width: 20px;
        height: 40px;
    }
    .t4 .text {
        float: right;
        width: 100%;
        margin-left: -20px;
        word-break: break-all;
    }
    .t4::after{
        float:right;
        background-color: #fff;
        content:'...';
        width: 20px;
        height: 20px;
        position: relative;
        left:100%;
        transform: translate(-100%,-100%);
    }
</style>

代碼示例

<!DOCTYPE html>
<html>
<head>
    <title>文本溢出截斷省略</title>
    <style type="text/css">
        #container{
            width: 300px;
            border: 1px solid #eee;
            position: relative;
        }
        section{
            padding: 5px 0;
            margin: 5px;
            border-bottom: 1px solid #eee;
        }
        .t1{
            white-space: nowrap; /* 文字在一行顯示不能換行 */
            overflow: hidden; /* 文字長度超出限定寬度則截斷 */
            text-overflow: ellipsis; /* 文本溢出時顯示省略符號 */
        }
        .t2{
            -webkit-line-clamp: 3; /* 限制在一個塊元素顯示的文本的行數 */
            display: -webkit-box; /* 顯示爲彈性伸縮盒子模型 */
            -webkit-box-orient: vertical; /* 設置伸縮盒對象的子元素的排列方式 */
            overflow: hidden; /* 文字長度超出限定寬度則截斷 */
            text-overflow: ellipsis; /* 文本溢出時顯示省略符號 */
        }
        .t4 {
            max-height: 40px;
            line-height: 20px;
            overflow: hidden;
        }
        .t4::before{
            float: left;
            content:"";
            width: 20px;
            height: 40px;
        }
        .t4 .text {
            float: right;
            width: 100%;
            margin-left: -20px;
            word-break: break-all;
        }
        .t4::after{
            float:right;
            background-color: #fff;
            content:'...';
            width: 20px;
            height: 20px;
            position: relative;
            left:100%;
            transform: translate(-100%,-100%);
        }
    </style>
</head>
<body>

    <div id="container">
        <section>
            <div class="t1">不很長的文本</div>
            <div class="t1">很長很長很長很長很長很長很長很長的文本</div>
        </section>

        <section>
            <div class="t2">不很長的文本</div>
            <div class="t2">很長很長很長很長很長很長很長很長的很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長的文本</div>
        </section>

        <section>
            <div class="t3">不很長的文本</div>
            <div class="t3">很長很長很長很長很長很長很長很長的很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長的文本</div>
        </section>

        <section>
            <div class="t4">
                <div class="text">不很長的文本</div>
            </div>
            <div class="t4">
                <div class="text">很長很長很長很長很長很長很長很長的很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長的文本</div>
            </div>
        </section>
    </div>


</body>
<script type="text/javascript">
    (function(){
        var lineNum = 3;
        var elements = document.getElementsByClassName("t3");
        Array.prototype.forEach.call(elements, element => {
            var text = element.innerText;
            var textLen = text.length;
            var baseWidth = window.getComputedStyle(element).width;
            var fontsize = window.getComputedStyle(element).fontSize;
            var lineWidth = baseWidth.slice(0, -2);
            var charCount = Math.floor(lineWidth / fontsize.slice(0, -2)); // 計算一行內可容納字數
            var content = "";
            var totalStrNum = Math.floor(charCount * lineNum); // 多行可容納總字數
            var lastIndex = totalStrNum - textLen;
            if (textLen > totalStrNum) content = text.slice(0, lastIndex - 3).concat('...');
            else content = text;
            element.innerText = content;
        })
    })();
</script>
</html>

每日一題

https://github.com/WindrunnerMax/EveryDay

參考

https://www.jb51.net/css/718058.html
https://zhuanlan.zhihu.com/p/92576904
https://www.jianshu.com/p/391702bd5b6b

相關標籤/搜索

每日一句

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