goTOP
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;
}


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
分頁: 1/1 第一頁 1 最後頁 [ 顯示模式: 摘要 | 清單 ]