用css處理文字溢出

photo by @joniastin

之前在開發時遇到一個狀況是超過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也是支援的，所以就可以放心使用囉！