CSS text-overflow

admin發表於2019-09-17

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

(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;}

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

相關文章