網(wǎng)頁(yè)設計中DIV超出部分怎么隱藏呢？
DIV超出部分隱藏的方法!在寫(xiě)樣式的時(shí)候，我們需要控制一些內容自動(dòng)折行，這樣可以統一固定好格式，能夠讓前臺的展現更加美觀(guān)。那么具體的如何能夠將超出的部分進(jìn)行隱藏呢?下面鄭州清新教育鄭州網(wǎng)頁(yè)設計培訓的老師就來(lái)講講具體的實(shí)現方法。
一般的文字截斷(適用于內聯(lián)與塊)：
.text-overflow {
display:block;/*內聯(lián)對象需加*/
width:31em;/*指定寬度*/
word-break:keep-all;/* 不換行 */
white-space:nowrap;/* 強制在同一行內顯示所有文本，直到文本結束或者遭遇 br 對象。不換行 */
overflow:hidden;/* 內容超出寬度時(shí)隱藏超出部分的內容 */
text-overflow:ellipsis;/* IE 專(zhuān)有屬性，當對象內文本溢出時(shí)顯示省略標記(...) ;需與overflow:hidden;一起使用。*/
}
對于表格文字溢出的定義：
table{
width:30em;
table-layout:fixed;/* 只有定義了表格的布局算法為fixed，下面td的定義才能起作用。 */
}
td{
width:100%;
word-break:keep-all;/* 不換行 */
white-space:nowrap;/* 不換行 */
overflow:hidden;/* 內容超出寬度時(shí)隱藏超出部分的內容 */
text-overflow:ellipsis;/* 當對象內文本溢出時(shí)顯示省略標記(...) ;需與overflow:hidden;一起使用。*/
}
以上就是關(guān)于“DIV超出部分隱藏的方法”，大家通過(guò)上文的學(xué)習，趕快來(lái)測試一下吧，看看你是否已經(jīng)掌握了真正的隱藏方法。
| << 上一篇：CSS使用必知的20個(gè)小技巧 | >> 下一篇：HTML5對瀏覽器支持情況詳解圖 |
- 2016-09-23網(wǎng)頁(yè)設計中的總結經(jīng)驗和心得
- 2016-09-23網(wǎng)頁(yè)設計中的Banner要做到傳情達意
- 2016-09-17網(wǎng)頁(yè)元素在網(wǎng)頁(yè)設計風(fēng)格的作用
- 2016-09-17如何讓網(wǎng)頁(yè)設計風(fēng)格更加具有商業(yè)化
- 2016-09-17網(wǎng)頁(yè)設計風(fēng)格及主色調的選擇和應用
- 2016-08-22網(wǎng)頁(yè)設計制作中的相近色應用
- 2016-07-13HTML5的發(fā)展趨勢前景怎么樣？
- 2016-04-16網(wǎng)頁(yè)設計制作是如何精確還原設計稿的
- 2016-04-10網(wǎng)頁(yè)設計中的柵格系統是什么？
- 2016-03-29網(wǎng)頁(yè)設計顏色搭配的三條原則
- 2016-03-29網(wǎng)頁(yè)設計如何配色?專(zhuān)業(yè)設計師告訴你
- 2016-03-29網(wǎng)頁(yè)設計一般用什么軟件較好？
- 2016-03-17室內裝修設計兒童房裝修地板怎么選擇？
- 2016-03-07室內設計說(shuō)明書(shū)怎么寫(xiě)？
- 2016-02-23室內設計中的裝修預算怎么做？
- 求學(xué)問(wèn)答專(zhuān)業(yè)答復，快速響應
- 電話(huà)：0371-63218905
- 手機：13613841515
-
QQ：
- 1 室內設計培訓課程 人咨詢(xún)中 19
- 2 平面設計培訓課程 人咨詢(xún)中 18
- 3 網(wǎng)頁(yè)設計培訓課程 人咨詢(xún)中 18
- 4 淘寶開(kāi)店培訓課程 人咨詢(xún)中 15
- 5 動(dòng)漫設計培訓課程 人咨詢(xún)中 12
- 6 淘寶美工培訓課程 人咨詢(xún)中 17
- 7 電腦辦公培訓課程 人咨詢(xún)中 15
- 8 網(wǎng)絡(luò )營(yíng)銷(xiāo)培訓課程 人咨詢(xún)中 13
- 9 模具設計培訓課程 人咨詢(xún)中 10
- 10 網(wǎng)站開(kāi)發(fā)培訓課程 人咨詢(xún)中 16
