css实现标题缩略显示方法

 

今天 在哈尔滨今日图灵学校，有朋友说起了应用css样式来实现文章标题多出的截去以省略号代替的方法(说来惭愧这方法早知道可竟然没仔细了解)，看到演示，如梦方醒，以后再也不费力气用程序来截去多余字串了...
这个方法很简单主要就是应用 css中的text-overflow:ellipsis实现：

首先我们来看看text-overflow的语法： 


语法： text-overflow : clip | ellipsis 

参数： 
clip : 　不显示省略标记（...），而是简单的裁切 
ellipsis : 　当对象内文本溢出时显示省略标记（...） 

说明： 

设置或检索是否使用一个省略标记（...）标示对象内文本的溢出。 
注意，text-overflow:ellipsis属性在FF中是没有效果的。
同时应用： text-overflow:ellipsis; white-space:nowrap; overflow:hidden; 就实现了想要得到的溢出文本显示省略号效果：
示例代码如下：

<style type="text/css">  ul {width:300px; border:1px solid red;}  li {width:300px; line-height:25px; text-overflow:ellipsis; white-space:nowrap; overflow:hidden;}  </style>  <ul>      <li>SQLserver2000安装文件挂起错误的解决办法       <li>Web标准：改变您的网页制作思维方式 节省代码及结构与表现分离      <li>JS组件dtree轻松实现树型菜单      <li>jsp+session拼图游戏原理分析  </ul>

不知道为什么text-overflow一直是一个不常用的样式，比起在后台用程序截断文本再附上省略标记的做法，用CSS来处理文本溢出显然更温和(unobtrusive)一些,而且这样做对搜索引擎更加友好，。而且它已经被定义在CSS 3 规范中，但目前为止，还只有 IE 提供了对其的支持，Firefox似乎落后一步…

这种做法十分简单，你不用关心页面显示字体会怎么变，它只认宽度，因为这一切都由浏览器来进行渲染，浏览器当然最有发言权，它自然也就最清楚自己在做什么，相反当你还在后台甚至是还未显示时的JS中进行截字符串处理，前台展示仍存太多未知数。