如何使用CSS的「text-overflow: ellipsis;」屬性限制內容字數？

設計版面時，為了讓網頁更整齊，常需要限制文字的字數，當文字超過限制時會自動顯示"…"的刪節號。

今天Astral Web要介紹如何限制字數，讓版面更整齊順眼；但這部分會用到程式碼較為複雜，需要有程式背景的人進行操作。

首先，單純使用CSS時，我們可以利用text-overflow: ellipsis; 這個屬性達到這個效果。

STEP 1:

先準備HTML

<div class="box">
<p class="ellipsis">Astral Web是一群對網路充滿熱情的團隊，我們相信網路的力量無遠弗屆，人人都有機會開創網路事業。一邊享受網路事業帶來的樂趣，一邊秉持著工作即是玩樂的精神，不斷激發各種靈感為客戶提高收益，提供最完善的服務。</p>
</div>

STEP 2:

首先設定區塊的大小

.box {
width: 300px;
padding: 10px;
border: #ef5c28 2px solid;
}

STEP 3:

接著在文字的區塊使用 text-overflow: ellipsis;
注意：在使用text-overflow: ellipsis; 時，需要一併設定 white-space: nowrap; 及 text-overflow: ellipsis; 才會有效果。

.ellipsis {
overflow:hidden;
white-space: nowrap;
text-overflow: ellipsis;
}

原始效果：

使用text-overflow: ellipsis之後：

不過使用 text-overflow: ellipsis; 屬性時、文字只能單行出現。若是想要多行文字、就必須要用javascript來判斷。示範如下：

STEP 1:

準備HTML

<div class="box">
<p class="JQellipsis">Astral Web是一群對網路充滿熱情的團隊，我們相信網路的力量無遠弗屆，人人都有機會開創網路事業。一邊享受網路事業帶來的樂趣，一邊秉持著工作即是玩樂的精神，不斷激發各種靈感為客戶提高收益，提供最完善的服務。</p>
</div>

STEP 2:

載入jquery

<script src="http://code.jquery.com/jquery-latest.min.js"></script>

STEP 3:

<script>
$(function(){
    var len = 50; // 超過50個字以"..."取代
    $(".JQellipsis").each(function(i){
        if($(this).text().length>len){
            $(this).attr("title",$(this).text());
            var text=$(this).text().substring(0,len-1)+"...";
            $(this).text(text);
        }
    });
});
</script>

效果：

希望本篇文章能夠幫到需要的朋友，若有相關問題歡迎洽詢！