自拍偷在线精品自拍偷,亚洲欧美中文日韩v在线观看不卡

CSS實(shí)例:常用CSS隱藏文字方法揭秘

開發(fā) 前端
本文向大家描述一個CSS實(shí)例:常用的CSS隱藏文字的方法,最常用的就是display:none,它可以使包括容器本身在內(nèi)的東西都消失,簡便且有效,但它有兩個耳熟能詳?shù)娜毕?,請看本文詳?xì)介紹。

 你對使用CSS隱藏文字的方法是否熟悉,這里向大家簡單介紹一下,比如display:none方法,它可以使包括容器本身在內(nèi)的東西都消失,簡便且有效,但是缺陷也不容忽視,那就是對搜索引擎不友好,且被屏幕閱讀器所忽略。

CSS實(shí)例:常用的CSS隱藏文字的方法

今天我們來學(xué)習(xí)一下其它的一些常用的方法,并作出一些點(diǎn)評分析:

1、display:none:

它可以使包括容器本身在內(nèi)的東西都消失,簡便且有效,但它有兩個耳熟能詳?shù)娜毕?,那就是對搜索引擎不友好,且被屏幕閱讀器所忽略。

2、text-indent:-9999px:

text-indent是首行縮進(jìn),所以對于多行文本,若單獨(dú)使用它就有明顯的不足,需加上white-space:nowrap;來彌補(bǔ)不足,但還有一個問題:物理空間仍然存在,故還需設(shè)置line-height:0;或使用超小字體(在IE下有點(diǎn)BUG),最終代碼如下:

CSS實(shí)例代碼:

  1. .texthidden{  
  2. text-indent:-9999px;  
  3. white-space:nowrap;  
  4. line-height:0;  
  5. }  
  6.  

3、overflow:hidden:

是一個比較合理且我最喜歡的方法,具體代碼如下:

CSS實(shí)例代碼:

  1. .texthidden{  
  2. display:block;/*統(tǒng)一轉(zhuǎn)化為塊級元素*/  
  3. overflow:hidden;  
  4. width:0;  
  5. height:0;  
  6. }  
  7.  

4、positon:absolute:

用絕對定位將其推出可視區(qū),不過雖然可視性不存在,但仍占據(jù)物理空間,與隱藏文字的宗旨相背

CSS實(shí)例代碼:

  1. .texthidden{  
  2. positon:absolute;  
  3. margin-top:-9999px;  
  4. margin-left:-9999px;  
  5. }  
  6.  

【編輯推薦】

  1. Div CSS實(shí)例教程:頁面制作方法全程指導(dǎo)
  2. 技術(shù)分享 如何實(shí)現(xiàn)CSS橫向?qū)Ш?/a>
  3. DIV CSS實(shí)例:用CSS實(shí)現(xiàn)背景半透明效果
  4. 解析DIV CSS實(shí)例:讓頁腳保持在未滿屏頁面底部
  5. 鼠標(biāo)經(jīng)過時改變DIV背景顏色的三種途徑

 

責(zé)任編輯:佚名 來源: mb5u.com
相關(guān)推薦

2010-08-23 10:43:21

DIVCSS

2010-08-24 12:47:32

DIVCSS

2010-08-24 13:34:11

CSSpadding

2010-09-03 13:23:07

absoluterelativeCSS

2010-08-31 15:07:45

CSS居中

2010-09-02 14:17:56

CSS浮動

2010-09-08 11:28:24

CSS縮寫

2010-08-25 13:54:29

CSStop

2010-09-01 12:50:04

CSS清除浮動

2010-08-30 13:29:06

超鏈接CSS

2010-09-08 15:59:51

CSS選擇器CSS

2009-07-30 09:42:29

CSS實(shí)現(xiàn)文字旋轉(zhuǎn)

2010-09-06 15:46:08

CSSDIV

2010-09-02 13:03:38

CSS垂直居中

2021-12-12 21:01:12

CSS 技巧PurgeCss

2010-08-26 10:33:27

CSSborder

2023-06-29 15:10:48

Web開發(fā)CSS

2010-08-16 14:18:49

DIV+CSS

2019-03-14 15:40:13

JavaScript CSS 工具

2010-09-14 09:18:28

DIVCSS
點(diǎn)贊
收藏

51CTO技術(shù)棧公眾號