我們?cè)跒g覽網(wǎng)頁的時(shí)候，常常會(huì)看到某些網(wǎng)站的文章標(biāo)題由于過長而只顯示一部分，另一部分用省略號(hào)來表示，這是為了防止標(biāo)題過長而導(dǎo)致頁面排版不好
看。那么這個(gè)文章標(biāo)題省略號(hào)是如何實(shí)現(xiàn)的呢？目前常見的方法是通過動(dòng)態(tài)語言程序來控制，判斷標(biāo)題的長度，然后截取部分來顯示，其余的用省略號(hào)顯示，這樣往
往在英文和中文的長度上難以判斷。今天在網(wǎng)上看到可以用CSS來實(shí)現(xiàn)，效果還不錯(cuò)，拿來分享。
CSS實(shí)現(xiàn)截?cái)噙^長標(biāo)題文字的原理非常簡(jiǎn)單，就是設(shè)置一個(gè)寬度，然后超過這個(gè)寬度值的內(nèi)容就隱藏，并用省略號(hào)來顯示。用到的就是text-
overflow:ellipsis，在IE下顯示是正確的，超出部分為省略號(hào)...，而在Firefox中超出部分卻是裁切掉了，有的文字就顯示一半，
很不好看，這是因?yàn)镕irefox不支持text-
overflow:ellipsis屬性。為了讓Firefox中也能顯示省略號(hào)，所以要外加一個(gè)xml文件。下面直接給出兼容IE和Firefox的代
碼：
<!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=gb2312" />
<title>使用CSS截?cái)噙^長標(biāo)題文字的方法-HTMer</title>
<style type="text/css">
<!--
.htmer{
width: 200px;
white-space: nowrap;
overflow: hidden;
text-overflow:ellipsis; /*兼容IE*/
-moz-binding: url('ellipsis.xml#ellipsis'); /*兼容Firefox，調(diào)用ellipsis.xml文件，注意ellipsis.xml文件路徑*/
}
-->
</style>
</head>
<body>
<div class="htmer">使用CSS截?cái)噙^長標(biāo)題文字的方法-HTMer</div>
</body>
</html>
ellipsis.xml文件源代碼：
<?xml version="1.0"?>
<bindings
xmlns="http://www.mozilla.org/xbl"
xmlns:xbl="http://www.mozilla.org/xbl"
xmlns:xul="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
>
<binding id="ellipsis">
<content>
<xul:description crop="end" xbl:inherits="value=xbl:text"><children/></xul:description>
</content>
</binding>
</bindings>
posted on 2011-01-17 11:13
Werther 閱讀(2324)
評(píng)論(1) 編輯 收藏 所屬分類:
11.JavaScript