採用獨自開發 RWD Bo-Blog插件 對應電腦版與手機版網頁。一次上架多版本對應、顯示迅速方便。
January 15, 2013
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;
}
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
