標題：CSS3  text-overflow 隱藏超過範圍的文字
出處：A.PAO designSTUDIO BLOG
時間：Tue, 15 Jan 2013 18:01:56 +0000
作者：apao
地址：https://blog.apao.idv.tw/post/904/

內容：

點擊在新視窗中瀏覽此圖片
https://blog.apao.idv.tw/attachment.php?fid=1470


CSS3中似乎只有一個寫法是不對應所有瀏覽器的...
已下為參考寫法...

.test {
width: 300px;
height: 1.4em;
text-overflow: ellipsis; /* Safari 用 */
-o-text-overflow: ellipsis; /* Opera 用 */
overflow: hidden;
white-space: nowrap; /* 文字不折行功能。一定要寫入，否則不會出現效果 */
border: 1px solid #666666;
}
.test:hover {
text-overflow: inherit; /* Safari 用 */
-o-text-overflow: inherit; /* Opera 用 */
overflow: visible;
}



HTML BODY中寫入
<div class="test"> 如果你要呈現過長的文章，請用滑鼠確認一下喔 </div>


sample:
http://blog.apao.idv.tw/sample/CSS3/text-overflow.html

參考：
http://blog.flugel.biz/2009/07/css3-text-overflow.html
http://www.w3schools.com/cssref/pr_text_white-space.asp


Generated by Bo-blog 2.1.1 Release