使用CSS隱藏元素的文本

Im trying在a標記中隱藏文本（我用於屏幕閱讀器），而是使用背景圖標。使用CSS隱藏元素的文本

HTML

<a href="#"><span>Search</span></a>

CSS

span { 
    display: none; 
} 
a { 
    display: inline-block; 
    width: 17px; 
    height: 16px; 
    background: url(http://i.stack.imgur.com/5c3zk.png); 
}

有沒有辦法做同樣沒有span？

來源

2013-02-26 Artem Svirskyi

我想你給你的標籤添加標題，你的屏幕閱讀器會讀取相同的標題。對於幾乎所有的元素，您可以添加此屬性並使其可讀。 – 2013-02-26 17:49:36

謝謝大家。 – 2013-02-26 17:56:50

不客氣SakerONE – 2013-02-26 17:57:14

您可以縮進文本，它是完全關閉屏幕：

text-indent:-5000px;

來源

2013-02-26 17:44:22

我沒有讀屏軟件，但如果我猜的沒錯這應該工作：

<a href="#"><img src="http://i.stack.imgur.com/5c3zk.png" alt="Search" /></a>

有了這個CSS規則：

a img { 
    border:0; 
}

基本上alt屬性是替代文本，其壽ld用於屏幕閱讀器的情況。

來源

2013-02-26 17:44:46 rekire

您應該檢查：Hide text using css

但它是這樣的：

HTML：

<a href="#">Search</a>

CSS：

a { 
    text-indent: -9999px; 
    white-space: nowrap; 
    outline: none; 

    display: inline-block; 
    width: 17px; 
    height: 16px; 
    background: url(http://i.stack.imgur.com/5c3zk.png); 
}

Here is the jsFiddle（我增加的背景色：紅;因爲圖像沒有加載。）

希望它有幫助。
乾杯。

來源

2013-02-26 17:48:22

HTML

<a class="my-title" href="#">Search</a>

CSS

a.my-title { text-indent:-9999px }

或

HTML

<a class="my-title" title="Search" href="#"></a>

CSS

a.my-title { display:block;width:123px; all-your-styling:...; }

屏幕閱讀器將捕捉從你的錨的冠軍屬性。

來源

2013-02-26 17:50:33

使用CSS隱藏元素的文本

回答

相關問題