梓悦生活

  • 🍟首页
  • 🍪免费资源
  • 🍓Wordpress
  • 🍋琐碎生活
  • 🍘关于
关注周围的人或事,体验人生历程
  1. 首页
  2. 琐碎生活
  3. 正文

让pre标签的代码块自动换行

2017/02/24 6707点热度 0人点赞 1条评论

<pre> 元素可定义预格式化的文本。被包围在 pre 元素中的文本通常会保留空格和换行符。而文本也会呈现为等宽字体。

<pre> 标签的一个常见应用就是用来显示源码。

而经常遇到的问题是:如果一句代码很长的情况,结果会造成页面撑开或者代码超出边界,非常难受。

用 overflow:hidden 那么会将原来的代码隐藏掉导致显示不全

而如果用 overflow:auto 则经常出现两个滚动条(右部和底部),阅读不方便还不美观。

如图:

1

解决 <pre> 的代码块自动换行的办法如下:

先尝试我们经常会使用的强制换行:word-wrap: break-word;

好像很完美,但换着浏览器看下,结果发现:IE,OP,Chrome,Safari都可以,Firefox就悲剧了。

仔细查了一下关于换行的css,原来还有 white-space ,丢到浏览器里试一试,填几个 参数 看看效果

加上 white-space:pre-wrap; 发现Firefox可以换行。

最后代码如下:

pre {
    white-space: pre-wrap;
    word-wrap: break-word;
}

效果如下:

2

这样就没有底部左右滚动条。

标签: 技巧
最后更新:2017/02/24

Meteor

关注周围的人或事,体验人生历程!

点赞
< 上一篇
下一篇 >

文章评论

  • 读书名言

    终于知道可以换行的代码了

    2017/03/12
    回复
  • razz evil exclaim smile redface biggrin eek confused idea lol mad twisted rolleyes wink cool arrow neutral cry mrgreen drooling persevering
    回复 读书名言 取消回复

    最新 热点 随机
    最新 热点 随机
    哆啦A梦免费转发面板 [教程]AWS免费EC2注册/使用/添加IPV6/SSH连接/删除实例 使用VestaCP搭建邮局(含DKIM,DMARC教程) [教程]利用宝塔面板邮局管理器搭建Roundcube Webmail自建邮局 [测评]喵云互联绍兴电信NAT套餐1测评 iperf3 网络性能测试
    [教程]AWS免费EC2注册/使用/添加IPV6/SSH连接/删除实例哆啦A梦免费转发面板
    爱是舍得,爱是不言而喻 腾讯微博两周年,完成任务获得2次100%中奖机会,红绿蓝钻+实物大奖等你拿 小内存VPS安装Caddy+PHP7+Sqlite3环境,并快速搭建Typecho博客 CentOS7 设置Docker及容器自动开启 cuccfree免费空间250M容量可绑米无广告Cpanel面板 HOST29免费提供的500M/50G/PHP/MYSQL/CP/绑米空间
    最近评论
    b2b系统 发布于 2 年前(12月29日) 感谢分享
    Meteor 发布于 2 年前(10月20日) 哈哈,友链一直都在,后来换了主题后忘记修改显示数量了,现在恢复好了。
    弋牧 发布于 2 年前(10月12日) 这里已经看不到我的友连了吗?
    彩鸽 发布于 2 年前(10月04日) 写的不错
    B2B海外商城系统 发布于 2 年前(09月21日) 感谢分享
    标签聚合
    宝塔 wordpress 活动 虚拟主机 Linux技巧 域名解析 技巧 VPS
    友情链接
    • Anders Norén
    • Appurse
    • CSS参考手册
    • DeeTeam-迪提姆
    • Fatesinger
    • FreeSSL
    • gandi
    • Internetbs
    • LogoMaker
    • Meteor's Blog
    • PM唐杰
    • SSL For Free
    • WPEX-Themes
    • 优品PPT
    • 免费顶级域名
    • 博客大全
    • 印记
    • 弋牧
    • 挖站否
    • 闫宝龙博客

    COPYRIGHT © 2023 梓悦生活. ALL RIGHTS RESERVED.

    Theme Kratos Made By Seaton Jiang