當鼠標移動到文字上時顯示全部內容，這種特效在很多網站都能看到。這一節我們來詳細為大家講解一下這個特效。
實現代碼如下：
在線測試
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS3實現鼠標移上去顯示全部內容</title>
<style type="text/css">
#container
{
text-overflow:ellipsis;
overflow:hidden;
white-space:nowrap;
border:1px solid gray;
width:300px;
padding:20px;
color:raba(0,0,0,0.7);
cursor:pointer;
}
#container:hover
{
white-space:normal;
height:148px;
background-color:#F2F9F9;
transition-property:background-color,height;
transition-duration:0.2s ;
transition-timing-function:linear;
}
</style>
</head>
<body>
<div id="container"> 學習網成立於2015年4月1日，是一個富有活力的技術學習網站。 學習網為廣大網絡工作者（網頁開發人員、站長等）提供各種精品教程以及最精華資料。 學習網跟其他垃圾采集站不一樣， 學習網中的每一個課程、每一篇文章，甚至每一個知識點，都凝聚了本人的最辛勤的汗水。</div>
</body>
</html>
在浏覽器預覽效果如下：
分析：
當鼠標移上去時，全部內容會逐漸顯示出來，最終效果如下：
這裡使用了CSS3過渡效果，並且使用了我們之前所學到的text-overflow屬性。當文字超出一定范圍時會以省略號顯示，並隱藏多余的文字，就必須用到以下語句：
text-overflow:ellipsis; overflow:hidden; white-space:nowrap;
相信不少人都忘了，這裡順便復習一下。