您現(xiàn)在的位置： 365建站網(wǎng) > 365文章 > 哪些情況下需要CSS隱藏文字？

哪些情況下需要CSS隱藏文字？

文章來源：365jz.com 點(diǎn)擊數(shù)：164 更新時(shí)間：2009-09-30 11:59 參與評(píng)論

主機(jī)網(wǎng)全新上線，買空間、服務(wù)器就上主機(jī)網(wǎng)，安全有保障！CNIDC.COM

今天在做一個(gè)頁(yè)面的時(shí)候，遇到一個(gè)常見的問題，切圖是否連文字一起切了。如果只切背景，文字的效果用css無法實(shí)現(xiàn)；如果連文字一起切，文本就為空，這樣在拋開css裸奔的情況下就不能很順利的汲取到頁(yè)面信息，不利于SEO。

所以就想到了，連文字一起切，用css隱藏文字的解決辦法。還有一種常見的需要隱藏文字的，就是文字的字段長(zhǎng)度超出了容器的寬度，需要隱藏。以前寫過解決辦法：

兩種方法實(shí)現(xiàn)超出省略號(hào)效果

純css方法：

以下為引用的內(nèi)容：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>JS test</title>
<style type="text/css">
*{
margin:0;
padding:0;
}
body{
padding:10px;
font-family:Arial;
}
#ididid{
position:relative;
width:150px;
height:20px;
line-height:20px;
text-overflow:ellipsis;
white-space:normal;
*white-space:nowrap;
overflow:hidden;
border:1px solid #999;
}
#ididid span{
position:absolute;
top:0;
right:0;
display:block;
float:left;
}
#ididid span:after{content:"...";}
</style>
</head>
<body>
<div id="ididid">woaicss woaicss woaicsswoaicsswoaicsswoaicss<span></span></div>
</body>
</html>

js判斷：

以下為引用的內(nèi)容：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>JS test</title>
<style type="text/css">
*{
margin:0;
padding:0;
}
body{
padding:10px;
font-family:Arial;
}
#ididid{
width:150px;
line-height:20px;
overflow:hidden;
border:1px solid #999;
}
</style>
</head>
<body>
<script type="text/javascript">
function testAuto(thisId,needLeng){
var ididid = document.getElementById(thisId);
var nowLeng = ididid.innerHTML.length;
if(nowLeng > needLeng){
var nowWord = ididid.innerHTML.substr(0,needLeng)+'...';
ididid.innerHTML = nowWord;
}
}
</script>
<div id="ididid">2323232woaicsswoaicsswoaicsswoaicss</div>
<script type="text/javascript">
testAuto('ididid',15)
</script>
</body>
</html>

這里說下第一種情況的解決方法。

1.在容器里面加個(gè)標(biāo)簽span，然后用display:none;兼容性比較好。但是會(huì)多個(gè)標(biāo)簽，如果循環(huán)使用的話，會(huì)多一堆html代碼，單個(gè)圖片或者按鈕推薦使用。

如果是要隱藏input 的value用這種方法就不好實(shí)現(xiàn)。所以就有了第二種方法：

2.使用text-indent：-9999px;

它也有個(gè)局限性，就是只能用于塊狀元素（block），如果我們想偏移掉a上的字體，問題就出來了：為了偏移文字要改變a的為block，這樣a后面的元素要到下一行了，要再用float來避免，這樣未免有點(diǎn)麻煩。

3.下面這種方法自己比較常用：

line-height:0;

font-size:0;

overflow:hidden;

能完美“隱藏”掉你background之上的字體，兼容性也比較好，經(jīng)測(cè)試 ie6.0 、 7.0 、8.0、firefox 3.010 通過。

當(dāng)然要根據(jù)具體的情況，沒有最好的只有最合適的。

蝸牛供稿：http://www.woaicss.com

感謝蝸牛的投稿

如對(duì)本文有疑問，請(qǐng)?zhí)峤坏浇涣髡搲瑥V大熱心網(wǎng)友會(huì)為你解答?。?點(diǎn)擊進(jìn)入論壇

您可能感興趣的文章:

發(fā)表評(píng)論 (164人查看，0條評(píng)論): 請(qǐng)自覺遵守互聯(lián)網(wǎng)相關(guān)的政策法規(guī)，嚴(yán)禁發(fā)布色情、暴力、反動(dòng)的言論。

昵稱：

最新評(píng)論

------分隔線----------------------------

上一篇：10大HTML標(biāo)簽罪行,您別再犯
下一篇：如何成為AJAX高手

大家感興趣的內(nèi)容

最近更新的內(nèi)容

9
什么是ipc

五月综合缴情婷婷六月,色94色欧美sute亚洲线路二,日韩制服国产精品一区,色噜噜一区二区三区,香港三级午夜理伦三级三

哪些情況下需要CSS隱藏文字？

您可能感興趣的文章:

公司信息

快速入口

其它欄目

業(yè)務(wù)咨詢

五月综合缴情婷婷六月,色94色欧美sute亚洲线路二,日韩制服国产精品一区,色噜噜一区二区三区,香港三级午夜理伦三级三

哪些情況下需要CSS隱藏文字？

您可能感興趣的文章:

公司信息

快速入口

其它欄目

業(yè)務(wù)咨詢

哪些情況下需要CSS隱藏文字？