CSS隱藏多餘文字的幾個方法

2021-09-22 09:18:33 字數 1481 閱讀 1052

通常偏移掉字型的方式是

(1)使用text-indent:-9999px;

可是他有乙個侷限性 他只適用於塊級元素block

而我們往往有時候想偏移掉的a上的字型

所以問題就來了

text-indent:-9999px;雖然用起來比較愜意

將a轉化成block的話 往往 他身後的的元素就被他趕到下一行了

如果正好這個a後面 是乙個a按鈕

就要用float來浮動以使他身後再出現簇擁者

這樣是不是有些麻煩呢

(2)line-height:0;

font-size:0;

overflow:hidden;

能完美「隱藏」掉你background之上的字型

經測試 ie6.0 、 7.0 、8.0、firefox 3.010 通過

(3)最方便的是加個span,然後display:none,而且這樣不會出bug。

遺憾的是,多了個標籤,迴圈中使用的話,html又多了一堆位元組,單個按鈕推薦這樣使用。

而針對input value的隱藏這個方式就有些吃力了

所以還是只能用block加text-indent來「偏移」模擬隱藏了

display:block;

font-size:0;

line-height:0;

text-indent:-9999px;

經測試 ie6.0 、 7.0 、firefox 3.010 通過

(4)css隱藏多餘文字為...

class="g_p_center g_t_right g_c_pdin g_h_20 c08" style="margin-bottom: 15px"> class="g_p_left"> > 試試看,hi.baidu.com/commy,試試看,hi.baidu.com/commy,

class="g_blog_list"> class="g_t_center g_c_pdin g_p_center c07 content"> class="ns_content">

語法: 

text-overflow : clip | ellipsis 

引數: 

clip :  不顯示省略標記(...),而是簡單的裁切

(clip這個引數是不常用的!)

ellipsis :  當物件內文字溢位時顯示省略標記(...)

說明: 

設定或檢索是否使用乙個省略標記(...)標示物件內文字的溢位。

請您注意,text-overflow:ellipsis屬性在ff中是沒有效果的。

示例:div  

text-overflow是乙個比較特殊的樣式,我們可以用它代替我們通常所用的標題擷取函式,而且這樣做對搜尋引擎更加友好,如:標題檔案有50個漢字,而我們的列表可能只有300px的寬度。如果用標題擷取函式,則標題不是完整的,如果我們用css樣式text-overflow:ellipsis,輸出的標題是完整的,只是受容器大小的侷限不顯示出來罷了。

CSS隱藏多餘文字的幾個方法

通常偏移掉字型的方式是 1 使用text indent 9999px 可是他有乙個侷限性 他只適用於塊級元素block 而我們往往有時候想偏移掉的a上的字型 所以問題就來了 text indent 9999px 雖然用起來比較愜意 將a轉化成block的話 往往 他身後的的元素就被他趕到下一行了 如...

CSS隱藏文字的幾個方法

通常偏移掉字型的方式是 1 使用text indent 9999px 可是他有乙個侷限性 他只適用於塊級元素block而我們往往有時候想偏移掉的a上的字型所以問題就來了text indent 9999px 雖然用起來比較愜意將a轉化成block的話 往往 他身後的的元素就被他趕到下一行了如果正好這個...

CSS隱藏文字的幾個方法

通常偏移掉字型的方式是 1 使用text indent 9999px 可是他有乙個侷限性 他只適用於塊級元素block而我們往往有時候想偏移掉的a上的字型所以問題就來了text indent 9999px 雖然用起來比較愜意將a轉化成block的話 往往 他身後的的元素就被他趕到下一行了如果正好這個...