用css處理文字溢出

發表於 更新於 分類於
之前在開發時遇到一個狀況是超過n個字後，要以…顯示，然後我就傻傻地用js來處理…

之前在開發時遇到一個狀況是超過 n 個字後，要以…顯示，然後我就傻傻地用 js 來處理…

假設我有一個 class 為 test 的 div

1
<div class="test">REGISTER ACCOUNT</div>

用 js 來抓取內容，並且用長度來判斷是否要截斷內容並加上…

1
2
3
4
5
6
7
8
9
10
11
var target = document.getElementsByClassName('test')\[0\];

function shorten(num){
 var str = target.innerText
 if(str.length>num){
 str = str.substring(0,num) +'...'
 }
 return str
}

target.innerText = shorten(9)

但這樣其實很不智慧，假設在多語系的情況下同樣語句的長度是會變動的，總不可能寫個設定檔來判斷哪種語言要截斷幾個字吧？

就可以使用 css 的提供的一個語法來處理這樣的情況

text-overflow:ellipsis

1
2
3
4
5
text-overflow: ellipsis;
/* 同時需要搭配 white-space & overflow */
white-space: nowrap;
/* 超過顯示範圍隱藏 */
overflow: hidden;

一開始會擔心支援度的問題，但用 caniuse 查詢過後發現 ie 也是支援的，所以就可以放心使用囉！