DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> CSS入門知識 >> CSS進階教程 >> CSS3網頁制作教程:overflow屬性超過一行顯示省略號
CSS3網頁制作教程:overflow屬性超過一行顯示省略號
編輯:CSS進階教程     

overflow屬性-原本是ie浏覽器獨自開發的屬性,由於在css3中被采用,得到了其他浏覽器的支持。

指定對於盒內容納不下的內容顯示的方法。

Overflow:hidden 對於超出容納范圍的文字會被隱藏。

Overflow:scroll div元素出現固定的水平滾動條與垂直滾動條

Overflow:auto 當文字超出是根據需要才會出現水平滾動條或者垂直滾動條

Overflow:visible 則顯示效果與不使用overflow屬性時一樣

Overflow-x、Overflow-y可以單獨指定水平方向上或者垂直方向上內容超出盒的容納范圍時的顯示方法。出現滾動條。

Text-overflow:設置內容在水平方向出現省略號。(white-space:nowrap使得盒右端內容不能換行顯示。)

.text{

width:200px;

text-overflow:ellipsis;

-o-text-overflow:ellipsis;

-webkit-text-overflow:ellipsis;

-moz-text-overflow:ellipsis;

white-space:nowrap;

}

<div class="text">文字實例文字實例文字實例文字實例文字實例文字實例文字實例文字實例文字實例文字實例文字實例文字實例文字實例文字實例文字實例文字實例文字實例文字實例文字實例文字實例文字實例文字實例文字實例文字實例文字實例文字實例文字實例文字實例文字實例文字實例文字實例文字實例文字實例文字實例文字實例文字實例文字實例文字實例文字實例文字實例文字實例文字實例文字實例文字實例文字實例文字實例文字實例文字實例文字實例文字實例文字實例文字實例文字實例文字實例文字實例文字實例文字實例文字實例文字實例文字實例文字實例文字實例文字實例文字實例文字實例文字實例文字實例文字實例</div>

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved