用css處理文字溢出
Published in
May 11, 2020
之前在開發時遇到一個狀況是超過n個字後,要以…顯示,然後我就傻傻地用js來處理…
假設我有一個class為test的div
//html
<div class="test">REGISTER ACCOUNT</div>
用js來抓取內容,並且用長度來判斷是否要截斷內容並加上…
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
text-overflow : ellipsis;
//同時需要搭配
white-space:nowrap; //不斷行
overflow:hidden;//超過顯示範圍隱藏
一開始會擔心支援度的問題,但用caniuse查詢過後發現ie也是支援的,所以就可以放心使用囉!