ITPub博客

首页 > 应用开发 > IT综合 > 利用CSS实现pre标签让内容自动换行

利用CSS实现pre标签让内容自动换行

原创 IT综合 作者:jyb2014 时间:2014-07-28 14:03:17 0 删除 编辑

  不烦恼的博客之前在代码显示上有点小问题,插入的代码堆积在一起看起来很乱,开始的时候以为是GeShi插件的问题一直也没在意,今天突然想到也许是CSS的问题,于是从网上找了段代码对pre标签样式进行了些改动,改动的部分:

  

点击(此处)折叠或打开

  1. pre, code {display: block;overflow: auto;background: #f4f4f4;padding: 5px 10px;border: 1px solid #eee;word-wrap:break-word; /* Internet Explorer 5.5+ */ }

  代码块中的内容终于自动换行了。

  但在FireFox中还是有些问题,于是再次修改CSS,最终的代码:

  pre, code {display: block;overflow: auto;background: #f4f4f4;padding: 5px 10px;border: 1px solid #eee;word-wrap:break-word; /* Internet Explorer 5.5+ */ white-space: pre-wrap; /* Firefox */}

  与上面的相比,只是多了最后一行的代码(现在博客中的代码看起来舒服多了)下面的代码在FF和IE中略有不同,FF下ol会有margin-bottom:20px的效果

来自 “ ITPUB博客 ” ,链接:https://blog.itpub.net/29753604/viewspace-1240055/ ,如需转载,请注明出处,否则将追究法律责任。

请登录后发表评论 登录
全部评论

注册时间:2014-07-15

  • 博文量
    101
  • 访问量
    196518