码迷,mamicode.com
首页 > Web开发 > 详细

CSS控制长文本内容显示(截取的地方用省略号代替)

时间:2014-08-18 16:11:22      阅读:203      评论:0      收藏:0      [点我收藏+]

标签:style   http   color   使用   io   ar   art   问题   

自动换行问题,正常字符的换行是比较合理的,而连续的数字和英文字符常常将容器撑大,下面介绍的是CSS如何实现处理的方法。

  现实中经常出现一些内容比较长的文本,为了使整体布局美观,需要将文本内容控制在一行显示,并且截取一定的长度,截取的地方用省略号代替。虽然用动态语言可以对其控制,但是这样做是不利于搜索引擎收录的,活用CSS可以巧妙地解决这个问题,请看下面的代码:
代码一:用于非表格LI或span等都可以

 www.169it.com

.text-overflow { 
display:block;/*内联对象需加*/ 
width:31em; 
word-break:keep-all;/* 不换行 */ 
white-space:nowrap;/* 不换行 */ 
overflow:hidden;/* 内容超出宽度时隐藏超出部分的内容 */ 
text-overflow:ellipsis;/* 当对象内文本溢出时显示省略标记(...);需与overflow:hidden;一起使用。*/ 
}

代码二:用于表格

table{ 
width:30em; 
table-layout:fixed;/* 只有定义了表格的布局算法为fixed,下面td的定义才能起作用。 */

}

td{
width:100%; 
word-break:keep-all;/* 不换行 */ 
white-space:nowrap;/* 不换行 */ 
overflow:hidden;/* 内容超出宽度时隐藏超出部分的内容 */ 
text-overflow:ellipsis;/* 当对象内文本溢出时显示省略标记(...);需与overflow:hidden;一起使用。*/

}

 

本文来源:CSS控制长文本内容显示(截取的地方用省略号代替)

CSS控制长文本内容显示(截取的地方用省略号代替),布布扣,bubuko.com

CSS控制长文本内容显示(截取的地方用省略号代替)

标签:style   http   color   使用   io   ar   art   问题   

原文地址:http://www.cnblogs.com/besty/p/3919601.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!