css實現文字超出li寬度的部分隱藏

admin發表於2017-02-23
CSS

在某些實際應用中，希望把文字超出的部分隱藏而非換行，下面就是一段這樣的程式碼例項。

程式碼如下:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html> 
<html> 
<head> 
<meta charset=" utf-8"> 
<meta name="author" content="http://www.softwhy.com/" /> 
<title>螞蟻部落</title> 
<style type="text/css"> 
#content{
  width:130px;
  height:80px;
  background-color:green;
  white-space:nowrap;
  text-overflow:ellipsis; 
  overflow:hidden;
}
</style> 
</head> 
<body> 
<div id="content">螞蟻部落歡迎您，只有奮鬥才會有美好的明天</div>
</body> 
</html>

以上程式碼實現了我們想要的功能，文字被擷取，並且後面以省略號方式代替。

相關閱讀:

（1）.white-space屬性可以參閱CSS white-space一章節。

（2）.text-overflow屬性可以參閱CSS text-overflow一章節。

（3）.overflow屬性可以參閱CSS overflow一章節。

相關文章