CSS控制文本溢出显示省略号

      似乎有一周多没有更新博客了吧，经验少阅历浅，也就没有什么高深的技术跟大家分享！不过还是有很多陌生的熟悉的朋友支持我的博客，我真的很高兴。

 

今早第一个工作任务就是把公司网站右侧推荐产品的标题由先前的一行改为两行，如图：

 

 

这个特别简单，但里边涉及了一个知识点：

 

用CSS控制文本溢出显示省略号text-overflow:ellipsis

      很多时候，比如网站最基本的文章列表，标题会很长，而显示列表的区域宽度却没有这么宽，这时候最正常的做法就是让超出宽度的部分文字用省略号(…)来表示。一种做法是网站后台程序截取一定的字符然后输出到前台显示或者前台用javascript截取一定的字符，但是通过控制字数来截取的话还是存在一个大问题的，因为中文和英文的字符宽度问题，这个字数不好控制，也不利于搜索，而且通用性较差。另一种方法就是通过css样式控制，使用text-overflow:ellipsis对溢出文本显示省略号有两个好处，一是不用通过程序限定字数；二是有利于SEO。对溢出文本显示省略号的通常是文章标题列表，这样处理对搜索引擎更友好，因为标题实际上并未被截字，而是局限于宽度而未被显示而已。

 

语法：

　　text-overflow : clip | ellipsis

 

取值：

       clip : 默认值。不显示省略标记(...)，而是简单的裁切

       ellipsis : 当对象内文本溢出时显示省略标记(...)

 

说明：

   　text-overflow属性仅是注解，当文本溢出时是否显示省略标记。并不具备其它的样式属性定义。我们想要实现溢出时产生   省略号的效果。还必须定 义：强制文本在一行内显示（white-space:nowrap）及溢出内容为隐藏（overflow:hidden）。只有这样才能实现溢出文本显示 省略号的效果。 举例说明：

 

view plaincopy to clipboardprint?

1. <h3 class="tit-h3"><a href="#">css控制文本溢出显示省略号举例</a></h3>  

view plaincopy to clipboardprint?

1. <style>  
2. .tit-h3{  
3. margin:10px auto;  
4. line-height:20px;  
5. width:150px;/* IE6 需要定义宽度 */   
6. overflow:hidden;  
7. white-space:nowrap;/* 不换行 */   
8. -o-text-overflow: ellipsis;/* Opera 9-10 */  
9. text-overflow:ellipsis;/* IE, WebKit (Safari, Chrome), Firefox 7, Opera 11 */}  
10. .tit-h3 a{color:#333;text-decoration:none;}  
11. </style>  

效果截图：

 

如果要现实两行，只能程序截取字符，这个不熟，也就不多说啦！