CSS和JS實現文本溢出顯示省略號

本文記錄實現文本溢出顯示省略號的幾種方式。

單行文本

三行CSS代碼實現：

   overflow: hidden; // 文本溢出隱藏
   text-overflow: ellipsis; // 顯示省略號
   white-space: nowrap; // 設置文本不換行

注意：

• 設置文本溢出顯示省略號時必須有寬度 width；
• 必須要設置display屬性為line-block/block,設置為其他值不生效。

多行文本

1. CSS代碼實現
這種方式用於webkit瀏覽器或者移動端頁面中。
具體例子如下：

<div class="box">
    <p class="textEllipsis">
       這是一段文字這是一段文字這是一段文字這是一段文字這是一段文字這是一段文字這是一段文字
    </p>
</div>

<style>
    box {
        width: 200px;
        background-color: #ccc;
    }
     .textEllipsis{
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;  /*顯示的行數*/
        overflow: hidden;
        word-break:break-all; /*可擇*/
    } 
</style>

在未設置 .textEllipsis 樣式之前文本如上圖顯示。
設置 .textEllipsis 樣式之后，如下圖顯示。顯示兩行，可以通過設置 -webkit-line-clamp 的屬性值來控制顯示的行數。

word-break: break-all; 所有的都換行，不留一點空隙的換行。如下圖所示。

2. 非webkit瀏覽器
可以通過css樣式技巧實現。實例如下：

<div class="box">
     <p class="textEllipsis">
        這是一段文字這是一段文字這是一段文字這是一段文字這是一段文字這是一段文字這是一段文字
     </p>
</div>

<style>
    .box {
            width: 200px;
            background-color: #ccc;
    }
    .textEllipsis {
    position: relative;
    line-height: 20px;
    height: 60px; /*height高度正好是line-height的n倍*/
    overflow: hidden;
    border: #5D5D5D solid 1px;
    word-break: break-all;
    }
    .textEllipsis::after {
        content: "…";
        position: absolute;
        bottom: 0;
        right: 0;
        width: 17px;
        padding-left: 33px;
        background: -webkit-linear-gradient(left, transparent, #fff 55%);
        background: -o-linear-gradient(right, transparent, #fff 55%);
        background: -moz-linear-gradient(right, transparent, #fff 55%);
        background: linear-gradient(to right, transparent, #fff 55%);
    }

效果圖如下，感覺不是很美觀，但也是一種實現方式。

js實現文本溢出顯示省略號

使用一些js庫實現文本溢出隱藏的效果也比較好。

1. Clamp.js 實現。github地址：https://github.com/josephschmitt/Clamp.js。

var module = document.getElementById('clamp-this-module');
//多行
$clamp(module,{clamp:3});
//單行
$clamp(module,{clamp:1});

2. 使用jquery插件，jQuery.dotdotdot。官網地址點這里
   注意：使用jQuery.dotdotdot插件時要給希望顯示省略號的盒子添加高度，否則不會生效。

<style>
  .wrapper {
    width: 400px;
    height: 50px;
  }
</style>

<p class="wrapper">  
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores maxime quia velit quod, praesentium animi a, debitis incidunt, consectetur odio, voluptatum nam dolores perspiciatis quo sit. Voluptatibus ab temporibus, sit!
</p>

<script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/jquery.dotdotdot@3.2.3/dist/jquery.dotdotdot.min.js"></script>
<script type="text/javascript">
    $(document).ready(function() {
        $(".wrapper").dotdotdot({
            // 添加相關配置項
            ellipsis : '...'
        });
    });
</script>

參考文章：https://blog.csdn.net/u013112461/article/details/102546463