手机
当前位置:查字典教程网 >网页设计 > Div+Css教程 >利用CSS截取标题长度方法
利用CSS截取标题长度方法
摘要:网站中经常出现一些标题比较长的文章,再调用标题时为了使整体布局美观,需要将标题控制在一行显示,并且截取一定的长度,截取的地方用省略号代替。虽...

网站中经常出现一些标题比较长的文章,再调用标题时为了使整体布局美观,需要将标题控制在一行显示,并且截取一定的长度,截取的地方用省略号代替。虽然用动态语言可以对其控制,但是这样做是不利于搜索引擎收录的,而CSS很巧妙地解决了这个问题,请看下面的代码:

代码一:用于非表格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;一起使用。*/

【利用CSS截取标题长度方法】相关文章:

用CSS实现垂直居中的3种方法

用CSS让DIV层水平居中

纯CSS实现鼠标悬停提示的方法

用overflow代替left截取指定长度字符串

火狐在用offsetHeight获取div的高度时为0的解决方法

CSS右对齐实现方法

CSS文字竖排方法

CSS创建一个鼠标感应换图片的按钮

如何利用CSS3制作3D文字效果

总结CSS简写方法

精品推荐
分类导航