我这个BLOG打从娘胎里就有个问题困扰着我,就是在代码、引用等区域插入特长的字符串,会跑到正文显示区域外面去,这样很不美观啊。
起初发现是在插入代码的时候发现的,以为是那个代码显示的东东的设置问题,不了了之,反正我用到的时候也有限。
最近在插入迅雷地址一长串的时候,也会有这个问题,苦恼啊。
昨天世界末日看大前端D-Simple主题更新到1.2版的日志,说修正了<pre>溢出问题,刚在写上一篇文章的时候插入代码时突然发现也是<pre>标签,试着找了一下,嘿嘿,原来是CSS的reset问题。于是找来一段css代码,加入了reset.css文件中:
blockquote, pre { white-space: pre; /* CSS 2.0 */ white-space: pre-wrap; /* CSS 2.1 */ white-space: pre-line; /* CSS 3.0 */ white-space: -pre-wrap; /* Opera 4-6 */ white-space: -o-pre-wrap; /* Opera 7 */ white-space: -moz-pre-wrap; /* Mozilla */ white-space: -hp-pre-wrap; /* HP Printers */ word-wrap: break-word; /* IE 5 */ }
这样,在blockquote, pre标签中的超长字符串就不会超出正文设置的宽度了,会自动换行了。不错吧
效果看文章《一路向西》下载文章的超长地址blockquote的效果,没有超出来哦,自己换行了。
很实用的CSS技巧,不错。