CSS如何實現把滑鼠放在行上整行變色

admin發表於2017-02-11
CSS

眾多的網站都有這樣的效果，當新聞標題過長的時候，一般都會擷取一部分，並且會在末尾使用省略號（...）表示被擷取掉的部分。這樣的效果當然也可以由後臺程式設計師來完成，當然前臺人員利用CSS也可以實現此效果，可以省卻很多後臺程式碼，有著不小的有點。下面簡單介紹一下如何實現此種效果。程式碼例項如下:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css">
div{
  overflow:hidden;
  white-space:nowrap;
  height:30px;
  width:230px;
  border:1px solid red;
  line-height:30px;
  margin-top:10px;
  text-overflow:ellipsis;
}
</style>
</head>
<body>
<div class="first">每一天都是新的，所以生活要和昨天有所不同！</div>
</body>
</html>

以上程式碼實現了我們想要的效果，將text-overflow屬性值設定為ellipsis即可。

相關文章