使用 JavaScript 和 CSS 限制內容字數

發表於 | 更新於: | 分類於 |

CSS

限定單行顯示，只要在元素加上以下css即可

1
2
3
4
5
6
7
display:block;

overflow:hidden;

text-overflow:ellipsis;

white-space:nowrap;

可以指定行數

1
2
3
4
5
6
7
8
9
10
11
12
13
display:-webkit-box;

overflow:hidden:

text-overflow:ellipsis;

-webkit-line-clamp: N;      // 想顯示的行數 lines you want to display

-webkit-box-orient: vertical;

line-height: n;       //解決firefox不支援-webkit-line-clamp的問題

max-height: n*N;      //解決firefox不支援-webkit-line-clamp的問題

JQuery

1
2
3
4
5
6
7
8
9
10
$(function(){
    var len = 10;
    $(".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);
        }
    });
});

JavaScript

1
2
3
4
5
6
7
8
const len = 9;
const ellipsis = document.querySelectorAll('.ellipsis');
ellipsis.forEach((item) => {
  if(item.innerHTML.length > len) {
    let txt = item.innerHTML.substring(0, len) + '...';
    item.innerHTML = txt;
  }
})

參考資料

[CSS] 限制行數字數的兩個方法
https://www.astralweb.com.tw/css-ellipsis/