您的位置:小众博客 > Zblog > 正文

用CSS属性控制丑陋的侧栏标题自动换行问题

2015年07月01日 / Zblog / 6006人阅读(点这评论)

很多网友经常碰到某个中意的主题模板侧栏标题或者文章标题文字过长的时候就会自动换行,文章标题自动换行倒不影响,特别是侧栏的标题自动换行的话像小众博客这么个强迫症是绝对不能容忍的。

小众博客的模板之前侧栏显示文章标题也是会自动换行的如图:

文章标题自动换行

下面小众博客就给强迫症患者介绍一下利用css属性控制标题过长自动换行的问题,让它不自动换行而是溢出隐藏。

这里要用到的CSS属性是text-overflow:ellipsis; white-space:nowrap; overflow:hidden;

语法: text-overflow : clip | ellipsis 
参数: 
clip :  不显示省略标记(...),而是简单的裁切(clip这个参数是不常用的!)
ellipsis :  当对象内文本溢出时显示省略标记(...)
说明: 
设置或检索是否使用一个省略标记(...)标示对象内文本的溢出。
请您注重,text-overflow:ellipsis属性在FF中是没有效果的。

text-overflow是一个比较非凡的样式,我们可以用它代替我们通常所用的标题截取函数,而且这样做对搜索引擎更加友好,如:标题文件有50个汉字,而我们的列表可能只有300px的宽度。假如用标题截取函数,则标题不是完整的,假如我们用CSS样式text-overflow:ellipsis,输出的标题是完整的,只是受容器大小的局限不显示出来罢了。
关于text-overflow属性如何应用:
text-overflow属性仅是注解,当文本溢出时是否显示省略标记。并不具备其它的样式属性定义。我们想要实现溢出时产生省略号的效果。还必须定义:强制文本在一行内显示(white-space:nowrap)及溢出内容为隐藏(overflow:hidden)。只有这样才能实现溢出文本显示省略号的效果。

案例:我们拿小众博客的侧栏自动换行修改为溢出隐藏举例。

首先我们找到侧栏标题的css属性为.rigth li(可通过审查元素查看)

然后我们修改主题CSS样式给.rigth li属性增加text-overflow:ellipsis; white-space:nowrap; overflow:hidden; 样式

然后保存,返回,查看效果。(此方法不限于zblog程序其他程序也可以比如wordpress\emlog\typecho等等)over~

溢出隐藏

表达能力有限,不懂的可以留言提出。

标签:CSS zblogphp教程 

ABOUT
七牛云存储 衡天主机
一灯学堂,专注互联网前端培训 特卖
最新文章
月度热门
热门话题