p0's blog | 破 关注网络安全
CSS实现pre,code标签让内容自动换行
发表于: | 分类: 技术分享 | 评论:0 | 阅读: 1541

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

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的效果


著作权归作者所有。
商业转载请联系作者获得授权,非商业转载请注明出处。
作者:p0
链接:https://p0sec.net/index.php/archives/24/
来源:https://p0sec.net/

添加新评论

TOP