利用CSS截取标题长度方法
2011-07-27 09:37
495 查看
网站中经常出现一些标题比较长的文章,再调用标题时为了使整体布局美观,需要将标题控制在一行显示,并且截取一定的长度,截取的地方用省略号代替。虽然用动态语言可以对其控制,但是这样做是不利于搜索引擎收录的,而CSS很巧妙地解决了这个问题,请看下面的代码:
代码一:用于非表格LI或span等都可以
代码二:用于表格
代码一:用于非表格LI或span等都可以
.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;一起使用。*/
相关文章推荐
- DedeCMS自动截取标题长度的两种方法
- bean:write之三 截取标题的长度的方法——类
- 新闻标题超出一定长度显示"..."的CSS处理方法
- DEDECMS教程:上/下一篇文章标题长度的截取方法
- 利用CSS动态设置标题长度
- 新闻标题超出一定长度显示"..."的CSS处理方法
- dedecms文章页上一篇与下一篇标题长度截取的方法
- 用css截取字符串长度的方法
- 用css截取字符串长度的方法
- DEDECMS教程:上/下一篇文章标题长度的截取方法
- DedeCMS自动截取标题长度的两种方法
- 有限长度空间内文本长度超出后通过css实现截取并显示省略号的方法
- 利用CSS动态设置标题长度
- 利用CSS截取标题函数
- 用Java实现按字节长度截取中英文数字字符串的方法总结
- DedeCms自定义字段调用长度截取方法
- 截取文章标题一定字数,后加省略号的方法
- css 标题一行图片 两行文字的排列方法以及相关问题处理
- 客户端(CSS)解决自动截取字符串长度,并以...代替
- 利用CSS、JavaScript及Ajax实现图片预加载的三大方法