限制內容字數方法

限制內容字數方法

範例結果

<h2>方法1:利用CSS3的text-overflow: ellipsis;</h2>
    <div class="ex01">
        <img src="https://tips.zoego.tech/wp-content/uploads/html5-css3.png" width="200px" alt="">
        <p>樣式資訊可以包含在一個附件中或包含在 HTML 檔案內。讀者可以使用多個樣式表,在重複的情況下他可以選擇其中之一。不同的媒體可以使用不同的樣式表。比如一個檔案在螢光屏上的顯示可以與在印表機中列印出來的顯示不同。這樣作者可以為不同的媒體設計最佳的顯示方式。</p>
    </div>

方法1:利用CSS3的text-overflow: ellipsis;

1.text-overflow: ellipsis; 時,需一併設定
white-space: nowrap;
text-overflow: ellipsis; 才會有效果

2.此方法文字只能單行出現。
若是想要多行文字、就必須要用javascript來判斷

div{ width: 300px;
     border: 1px solid #000; padding: 10px; margin: auto;
    }
 img{width:150px; margin: 0 auto; display: block;}
 .ex01 p { overflow:hidden;
     white-space: nowrap;
     text-overflow: ellipsis;}

方法2:利用JQ【字數限制判斷】

<h2>方法2:利用javascript【字數限制判斷】</h2>
    <div class="ex02">
        <img src="https://tips.zoego.tech/wp-content/uploads/html5-css3.png" width="200px" alt="">
        <p>樣式資訊可以包含在一個附件中或包含在 HTML 檔案內。讀者可以使用多個樣式表,在重複的情況下他可以選擇其中之一。不同的媒體可以使用不同的樣式表。比如一個檔案在螢光屏上的顯示可以與在印表機中列印出來的顯示不同。這樣作者可以為不同的媒體設計最佳的顯示方式。</p>
    </div>

 

//方法2:利用【字數限制判斷】
    var $len = 50; // 超過50個字以"..."取代
    $(".ex02 p").each(function(){
        if($(this).text().length > $len){
            var $text=$(this).text().substring(0,$len-1)+"...";
            $(this).text($text);
        }
    });

方法3:利用JQ【加上按鈕收合資料】

 <h2>方法3:利用javascript【加上按鈕收合資料】</h2>
    <div class="ex03">
        <img src="https://tips.zoego.tech/wp-content/uploads/html5-css3.png" width="200px" alt="">
        <p>樣式資訊可以包含在一個附件中或包含在 HTML 檔案內。
            <span>讀者可以使用多個樣式表,在重複的情況下他可以選擇其中之一。不同的媒體可以使用不同的樣式表。比如一個檔案在螢光屏上的顯示可以與在印表機中列印出來的顯示不同。這樣作者可以為不同的媒體設計最佳的顯示方式。</span>
        </p>
        <button>more...</button>
    </div>

 

span{display: none;}

 

//方法3:【加上按鈕收合資料】
  $('button').click(function(){
        if($('.ex03 span').is(':hidden')){
          $(this).text('hide...');
          $('.ex03 span').show();
        }else{
          $(this).text('more...');
          $('span').hide();
        }
  });