HTML隱藏文本的方法

想要把文本隱藏在終端塊狀元素裡而不隱藏元素本身。不想在文檔中插入任何額外的標記。希望文本可被屏幕器閱讀。 想要確定高度和寬度，這樣可以顯示一幅背景圖像來代替文本。下面我們給大家介紹一下HTML隱藏文本的方法吧!

解決方案

可以使用text-indent:-9999px將文本從屏幕上移走，這樣它就看不見了。

n    可以使用text-align:left來確保塊狀元素沒有繼承text-align的另一個值。這一點是很重要的，因為只有當文本在左側排成一行時，text-indent才會正常工作。

n    可以使用width和height設置元素的大小來顯示背景圖像。

n    可以使用text-align將文本移到左側或右側--遠離背景圖像。

模式

TERMINAL_BLOCK_SELECTOR {

text-indent:-9999px;

text-align:left;

width:+VALUE;

height:+VALUE;

background-image:url("FILE.EXT");

background-repeat:VALUE;

background-position:H V; }

適用范圍

此模式適用於任何終端塊狀元素。

局限

這種設計模式只能用在終端塊狀元素(比如段落)，不能用於內聯元素。如果浏覽器不能顯示背景圖像，用戶就什麼也看不見。

提示

如果可以插入一個極小的額外標識，文本替換設計模式就會好多了。

以上就是我們給大家介紹的HTML隱藏文本的方法了。希望大家繼續關注我們的網站!