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

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

超人不会飞 / Zblog / 3696人阅读(点这评论

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

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

文章标题自动换行

下面小众博客就给强迫症患者介绍一下利用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~

溢出隐藏

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

- END -

标签:CSS zblogphp教程 

业界动态
  • 库克:中国从未要求苹果公司解锁手机
  • 搜狗开了个小差儿
  • 权健实际控制人束某某等18人被刑拘
  • 8 岁的微信更新了 7.0,张小龙想要如何打动你我?
  • 晚报 因色情内容微信及QQ邮箱暂停漂流瓶服务
  • 晚报 瓜子二手车因违反广告法被开千万罚单
  • 谷歌再砍通讯应用环聊Hangouts 2020年关停旧版
  • 阿里巴巴调整架构:阿里云升级为阿里云智能
  • Steam正式进入中国
  • 欧盟拟征“链接税” 谷歌威胁关闭“谷歌新闻”
  • 网站运营
  • 什么是Referer 设置防盗链时候指明和不指明空Referer的区别
  • 宝塔面板迁移系统盘/www到数据盘/data
  • 自适应网页设计代码需要做的6大调整
  • 站长们,不要忘了你的网站是要做什么的
  • 浅谈网站网页面价值所在
  • 2016年网络SEO外链指南
  • 网站优化太早并不是一定是好事
  • 十年博客路 花开花散 云卷云舒
  • SEO专员,如何评估一个外链的价值?
  • 从博客与微博的区别,谈社交创新的九败一胜
  • 年度热门
  • 大疆无人机针对美国市场涨价
  • 谷歌正式关闭短网址服务GOO.GL
  • 支付宝回应AI换脸 出意外全额赔付
  • 微博调整转发评论数据上限一百万
  • 越来越多的中年人消失在朋友圈
  • 2018年搜索引擎百度拦截打击500多亿条有害信息
  • 搜狗开了个小差儿
  • 8 岁的微信更新了 7.0,张小龙想要如何打动你我?
  • 阿里云双12服务器两折优惠 仅限新人使用
  • 这个“忽悠”马云10亿的男人,终于当选为院士