CSS3 text-overflow

admin發表於2019-02-12
CSSS3

理解並掌握此屬性的使用可以從其名稱入手，屬性名稱由兩個單詞構成：

（1）.text：翻譯成漢語具有"文字"的意思。

（2）.overflow：翻譯成漢語具有"溢位"的意思。

於是可以有理由猜測，此屬性的功能是用於規定如何處理溢位的文字，事實也是如此。

text-overflow屬性用於規定以何種形式向瀏覽者發出訊號，以提示當前文字產生溢位現象。

比如最為常見的處理方式，在字串尾部使用"..."替代溢位的文字，或者直接將溢位的文字裁切掉。

通過text-overflow屬性即可實現上面列舉的兩種方式，此屬性功能不止於此，但當前瀏覽器支援度非常低。

語法結構：

[CSS] 純文字檢視 複製程式碼
text-overflow: clip|ellipsis|string

引數解析：

（1）.clip：規定對溢位的文字進行裁切。

（2）.ellipsis：規定使用"..."替代溢位的文字。

（3）.string（處於實驗狀態）：規定使用指定的字串替代溢位的文字。

特別說明：

（1）.text-overflow屬性還可以有其他形式屬性值，處於試驗狀態，且相容性非常低。

（2）.本文暫時不對這些屬性做介紹，當這些屬性被標準化且相容性良好，本文會第一時間更新。

下面對此屬性生效的條件做一下簡單闡述：

（1）.既然是對溢位文字進行處理，那麼文字必須有溢位現象才會生效。

（2）.絕大多數條件下，文字會自動換行，但是text-overflow並不會強制文字不換行。

（3）.所以要與overflow和white-space配合使用，否則無效。

瀏覽器支援：

（1）.IE瀏覽器支援此屬性。

（2）.edge瀏覽器支援此屬性。

（3）.谷歌瀏覽器支援此屬性。

（4）.火狐瀏覽器支援此屬性。

（5）.opera瀏覽器支援此屬性。

（6）.safria瀏覽器支援此屬性。

特別說明：各個瀏覽器都支援text-overflow屬性，對各個屬性值的支援有差別。

程式碼例項如下：

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html> 
<html> 
<head> 
<meta charset=" utf-8"> 
<meta name="author" content="http://www.softwhy.com/" /> 
<title>螞蟻部落</title> 
<style type="text/css">
div{
  width:250px;
  height:48px;
  background-color: #ccc;
  text-overflow:clip;
} 
</style>  
</head> 
<body> 
<div>螞蟻部落歡迎您，本站位於山東省青島市南區。</div> 
</body> 
</html>

程式碼執行效果截圖如下：

a:3:{s:3:\"pic\";s:43:\"portal/201902/12/114231mz736s9s32eoa7ar.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

可以看到，text-overflow屬性的設定並沒有生效，因為沒有滿足生效的條件。

（1）.屬性生效的先決條件是文字換行。

（2）.上述文字到達邊界後自動換行了，所以沒有溢位，自然屬性也不會生效。

前文已經提到，需要和overflow和white-space配合使用，程式碼修改如下：

a:3:{s:3:\"pic\";s:43:\"portal/201902/12/114245z1r8i1vtrxcvmdrm.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

clip屬性值被當前各主流瀏覽器支援，非常簡單不多介紹。

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html> 
<html> 
<head> 
<meta charset=" utf-8"> 
<meta name="author" content="http://www.softwhy.com/" /> 
<title>螞蟻部落</title> 
<style type="text/css">
div{
  width:250px;
  height:48px;
  background-color: #ccc;
  text-overflow:ellipsis;
  overflow:hidden;
  white-space:nowrap;
} 
</style> 
</head> 
<body> 
<div>螞蟻部落歡迎您，本站位於山東省青島市南區。</div> 
</body> 
</html>

程式碼執行效果截圖如下：

a:3:{s:3:\"pic\";s:43:\"portal/201902/12/114308c340lhnznls11ln1.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

將屬性值設定為"ellipsis"即可實現使用三個點替代溢位文字的功能。

如果不使用此屬性，實現類似的功能更多的需要藉助JavaScript等語言。

ellipsis屬性值被當前各主流瀏覽器支援，非常簡單不多介紹。

當然我們也可以使用指定的字串來替代溢位的文字，但是當前瀏覽器支援度非常低，看如下程式碼例項：

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html> 
<html> 
<head> 
<meta charset=" utf-8"> 
<meta name="author" content="http://www.softwhy.com/" /> 
<title>螞蟻部落</title> 
<style type="text/css">
div{
  width:250px;
  height:48px;
  background-color: #ccc;
  text-overflow:"ant";
  overflow:hidden;
  white-space:nowrap;
} 
</style> 
</head> 
<body> 
<div>螞蟻部落歡迎您，本站位於山東省青島市南區。</div> 
</body> 
</html>

程式碼執行效果截圖如下：

a:3:{s:3:\"pic\";s:43:\"portal/201902/12/114333usooo3jho9z1njrn.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

當前只有火狐瀏覽器支援此語法結構，當然隨著時間的推移支援度隨時可能發生變化。

相關文章