截字是一个很恶心的问题。为了照顾表现上的需要，通常需要把过长的句子，比如一个列表中的新闻标题，截短。
通常这由程序员使用后台技术（各种流行的语言，PHP, JSP等）或者前台技术（JavaScript）来处理。我个人倾向于使用前台技术，因为这对提高网页的亲和力（accessibility）有好处。在非桌面型的浏览器中，用户可以更方便的掌握信息完整性。
text-overflow是CSS3的一个性质（property），它可以截短过长的字符串，并依据值（value）来决定被截掉部分使用何种方式展现。目前，IE已经实现对其的支持，Opera也有了私有属性（-o-text-overflow）对其支持，Firefox似乎落后一步……支持的两者都可使用ellipsis 值，把截掉部分替代成省略号（即ellipsis）。
所以，你要做的只是，把需要截字的元素定好宽度，和overflow一起使用，即可实现效果。
但是Firefox不支持，所以大概你知道我下面要干什么了。 :)
先可以看看Yahoo某大牛的解决方案：http://blog.360.yahoo.com/blog-ktYYK_s5fqJ2Hu1ryv2QSL0-?p=120。大牛就是大牛，XBL和JavaScript双管齐下。
然后，我的解决方案是，利用伪类:after增加省略号，再把它定位到右边即可。效果有点粗糙，但简洁明了，纯CSS实现。
具体过程不说了，看案例，有兴趣者看看源码，很容易理解的。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"//www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="//www.w3.org/1999/xhtml" xml:lang="zh">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="author" content="陈贤安, aka Realazy" />
<meta name="copyright" content="创作共用（Creative Commons）,//www.creativecommons.cn/licenses/by-nc-sa/1.0/" />
<title>使用CSS截字</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
a {
text-decoration: none;
color: #df3a0e;
}
ul {
width: 200px;
margin: 40px auto;
padding: 12px 4px 12px 24px;
border: 1px solid #005fb0;
background: #e0f1ff;
}
li {
margin: 12px 0;
width: 200px;
}
li a {
display: block;
width: 200px;
overflow: hidden;
white-space: nowrap;
-o-text-overflow: ellipsis;
text-overflow: ellipsis;
}
/* firefox only */
li:not(p) { /* wtf is? pls let me know*/
clear: both;
}
li:not(p) a {
max-width: 170px;
float: left;
}
li:not(p):after {
content: "…";
float: left;
width: 25px;
padding-left: 5px;
color: #df3a0e;
}
</style>
</head>
<body>
<ul>
<li><a href="#" title="引只處藝">引只處藝</a></li>
<li><a href="#" title="除食有回，股發車個但色了又樣一苦場苦的容流有和為施會">除食有回，股發車個但色了又樣一苦場苦的容流有和為施會</a></li>
<li><a href="#" title="面天也產毒知產自什，腳子流去加心？">面天也產毒知產自什，腳子流去加心？</a></li>
<li><a href="#" title="像回未房天的近再，星體西記為形實人">像回未房天的近再，星體西記為形實人</a></li>
<li><a href="#" title="更可團調學聲足經光靜，小結特股子道們光要常選之他東發有吃位一重企直不招小回建以法來始切其友程陸雄像下看鄉增">更可團調學聲足經光靜，小結特股子道們光要常選之他東發有吃位一重企直不招小回建以法來始切其友程陸雄像下看鄉增</a></li>
<li><a href="#" title="的相身飛葉印白感，在有面力都年線前受長幾南說腦他叫開原">的相身飛葉印白感，在有面力都年線前受長幾南說腦他叫開原</a></li>
</ul>
</body>
Recent Comments