文章彙整

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

Astral WebBy Astral Web 4 years ago4 Comments
首頁  /  網站設計與開發  /  如何使用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;
}

原始效果:

CSS刪節號-text-overflow: ellipsis
使用text-overflow: ellipsis之後:

Css刪節號-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>

效果:

javascript-text-overflow: ellipsis

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

以上內容由Astralweb 歐斯瑞編寫製作

 000

推薦文章

Category:
  網站設計與開發

4 Comments

  • 小朱 says:

    請問這段jquery語法為?

  • HSIN says:

    不好意思 請問
    重新整理的時候
    原本消失的字會閃一下
    效果呈現沒有問題
    可是這樣的情況要怎麼解決呢?

    • Astral Web Astral Web says:

      建議您使用chrome 開發工具檢查問題。如果您使用chrome瀏覽器,按下F12、檢查”console”、這邊可以看到錯誤訊息。

留下回應

你的電子郵件地址不會被公開.

取得獨家電子商務祕技

建立更好的策略靈感

跟上全球的網路趨勢

絕佳的電商解決方案

電子商務戰略全指南

每月發送電商戰略指南,只要填寫E-mail即可訂閱!

請到您的信箱確認,即可完成訂閱。