{ hide_text } CSS文字隱藏總結(jié)報(bào)告

最近整理的一份CSS文字隱藏的demo，總結(jié)了幾種方法，希望得出一種最完美的方案放進(jìn)自己的代碼片段，可是，到最后卻陷入一種重復(fù)不斷地推翻結(jié)論的境地。因?yàn)樾枰紤]的應(yīng)用場(chǎng)景和元素實(shí)在太多，放下瀏覽器不談，不同的應(yīng)用終端，不同的標(biāo)簽結(jié)構(gòu)會(huì)有不一樣的最優(yōu)方案，因此，與其希望在工作上多“偷一些懶”，不如平常多鞏固積累基礎(chǔ)的知識(shí)，在需要權(quán)衡的時(shí)候，便能更加得心應(yīng)手。

因?yàn)樽约航?jīng)驗(yàn)尚淺，demo部分難免會(huì)有錯(cuò)漏情況，如發(fā)現(xiàn)問題，望大家能指出。

方法列表 demo

    1.   毫無(wú)保留：display:none

代碼片段：
(x)HTML
<p class="hide_display">我是打醬油的文本</p> CSS
/* 暴力隱藏 */
.hide_display{display:none;}

兼容性：

優(yōu)點(diǎn)：

• 方便、快捷
• 兼容性好

缺點(diǎn)：

• 屏幕閱讀器無(wú)法閱讀
• 超鏈接不適用
• 圖片替代文本需要其他標(biāo)簽的背景
• 影響搜索排名
• 大量使用容易被認(rèn)為是SEO作弊

    2.   折中選擇：overflow:hidden/position:absolute/visibility:hidden

代碼片段：

(x)HTML
<span class="hide_overflow">我是一號(hào)打醬油的文本</span> 
<p class="hide_position">我是二號(hào)打醬油的文本</p> 
<p class="hide_visibility">我是三號(hào)打醬油的文本</p> CSS
/* 隱藏元素，脫離文本流，使元素不影響其他元素 */
.hide_overflow{ 
height:0px; 
overflow:hidden; 
display:block;/* 行內(nèi)元素需要 */
float:left; /* 脫離文檔流 或者position:absolute;*/
} 
/* 定位在可視范圍外，脫離文本流，使元素不影響其他元素 */
.hide_position{ 
position:absolute; 
left:-32767px;
} 
/* 原理與.hide_position一樣*/
.hide_visibility{ 
visibility:hidden; 
position:absolute; /* 脫離文檔流 */
margin-left:-32767px; 
}

生活不易，碼農(nóng)辛苦
如果您覺得本網(wǎng)站對(duì)您的學(xué)習(xí)有所幫助,可以手機(jī)掃描二維碼進(jìn)行捐贈(zèng)