為了照顧表現上的需要，通常需要把過長的句子，比如一個列表中的新聞標題，截短。
通常這由程序員使用後台技術（各種流行的語言，PHP, JSP等）或者前台技術（JavaScript）來處理。我個人傾向於使用前台技術，因為這對提高網頁的親和力（Accessibility）有好處。在非桌面型的浏覽器中，用戶可以更方便的掌握信息完整性。
text-overflow是CSS3 的一個性質（property），它可以截短過長的字符串，並依據值（value）來決定被截掉部分使用何種方式展現。目前，IE已經實現對其的支持，Opera也有了私有屬性（-o-text-overflow）對其支持，Firefox似乎落後一步……支持的兩者都可使用ellipsis 值，把截掉部分替代成省略號（即ellipsis）。
所以，你要做的只是，把需要截字的元素定好寬度，和overflow一起使用，即可實現效果。
但是Firefox不支持，所以大概你知道我下面要干什麼了。 :)
然後，我的解決方案是，利用偽類:after增加省略號，再把它定位到右邊即可。效果有點粗糙，但簡潔明了，純CSS實現。
具體過程不說了，看案例，有興趣者看看源碼，很容易理解的。
<!DOCTYPEHtml PUBLIC "-//W3C//DTD <a class="channel_keylink" href="http://www.Javaweb.cc/">XHTML</a> 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="Java中文網, http://www.Javaweb.cc/"/>
<meta name="copyright" content="創作共用（CreativeCommons）,//www.creativecommons.cn/licenses/by-nc-sa/1.0/" />
<title>使用<a class="channel_keylink" href="http://www.Javaweb.cc/">CSS</a>截字</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="Java中文網">Java中文網</a></li>
<li><a href="#"title="我欲與君相知，長命無絕衰。">我欲與君相知，長命無絕衰。</a></li>
<li><a href="#"title="DIV+CSS布局-山無陵，江水為竭，冬雷震震">DIV+CSS布局-山無陵，江水為竭，冬雷震震</a></li>
<li><a href="#"title="CSS截字功能-夏雨雪，天地合，乃敢與君絕">CSS截字功能-夏雨雪，天地合，乃敢與君絕</a></li>
<li><a href="#"title="癡情女子對愛人的熱烈表白，在藝術上很見匠心詩的主人公在呼天為誓，直率地表示了“與君相知，長命無絕衰”的願望">癡情女子對愛人的熱烈表白，在藝術上很見匠心詩的主人公在呼天為誓，直率地表示了“與君相知，長命無絕衰”的願望</a></li>
<li><a href="#"title="Java中文網:http://www.javaweb.cc/表達了熱戀中人特有的絕對化心理">Java中文網:http://www.Javaweb.cc/表達了熱戀中人特有的絕對化心理</a></li>
</ul>
</body>
</Html>