純css實現的擷取字串功能

admin發表於2017-02-28
CSS字串

擷取字串功能可以使用後臺語言實現，也可以使用javascript實現，具體可以參閱js擷取字串程式碼例項一章節，下面通過程式碼例項介紹一下如何利用css實現擷取字串的功能。

程式碼如下:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title> 
<style type="text/css">
ul li{
  width:180px;
  height:30px;
  list-style:none;
  overflow:hidden;
  text-overflow:ellipsis; 
  white-space:nowrap;
  line-height:30px;
}
</style>
</head> 
<body> 
<ul>
  <li>只有努力奮鬥才會有美好的明天</li>
  <li>沒有人一開始就是高手</li>
  <li>只有虛心的人才會有真正的進步</li>
  <li>每一天都是新的好好珍惜</li>
</ul>
</body> 
</html>

以上程式碼實現了我們的要求，如要是採用了以下程式碼:

[CSS] 純文字檢視 複製程式碼
overflow:hidden;
text-overflow:ellipsis; 
white-space:nowrap;


相關文章