技術(shù)頻道導(dǎo)航
HTML/CSS
.NET技術(shù)
IIS技術(shù)
PHP技術(shù)
Js/JQuery
Photoshop
Fireworks
服務(wù)器技術(shù)
操作系統(tǒng)
網(wǎng)站運(yùn)營

贊助商

分類目錄

贊助商

最新文章

搜索

div或td超出寬度的內(nèi)容自動隱藏的寫法【css代碼實現(xiàn)】

作者:admin    時間:2015-6-24 21:23:46    瀏覽:

很多情況下,在網(wǎng)頁設(shè)計時每個模塊的寬度和高度都要固定,然后只需往模塊里更新內(nèi)容即可,但是如果內(nèi)容過多,就有可能把模塊撐大,從而使版面錯亂。準(zhǔn)對這個情況,網(wǎng)頁設(shè)計時就要考慮到,每個模塊的div或table的高寬一定不能因內(nèi)容過多而變化,這需要在設(shè)計上使用一點技巧來實現(xiàn)。本文便介紹一個常用的也是非常簡單的方法,這個方法是通過css代碼來實現(xiàn)的。

css代碼實現(xiàn)div或td超出寬度的內(nèi)容自動隱藏

大家先看這兩個效果,一個是隱藏超出td寬度的圖片區(qū)域,另一個是隱藏超過div寬度的文字。

隱藏超出td寬度的圖片區(qū)域

隱藏超出td寬度的圖片區(qū)域

隱藏超過div寬度的文字

隱藏超過div寬度的文字

實現(xiàn)代碼如下

1、隱藏超出td寬度的圖片區(qū)域(或文字)

<table style="border:0px;table-layout: fixed;width:600px" ><tbody><tr><td style="overflow: hidden; white-space: nowrap; text-overflow: ellipsis;"><img src="..."></td></tr></tbody></table>

實現(xiàn)的css包含兩個部分,一個是table的css,另一個是td的css。

table的css起到固定的作用,td的css的作用是隱藏超出寬度的內(nèi)容。

2、隱藏超過div寬度的文字

<div style="width:600px;overflow: hidden; white-space: nowrap; text-overflow: ellipsis;">div的內(nèi)容</div>

div的css跟table和td的css其實是一樣的,div的css里需要加上寬度。

標(biāo)簽: css  
相關(guān)文章
    x
    • 站長推薦
    /* 左側(cè)顯示文章內(nèi)容目錄 */