使用 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/