梓悦生活

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

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

2017/02/24 4315点热度 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
    取消回复

    最新 热点 随机
    最新 热点 随机
    Vultr 推出免费云主机,用于鼓励全球创新 一键网络重装系统 – 魔改版(适用于Linux / Windows) Debian/Ubuntu SSH端口一键修改脚本及关闭防火墙 [云监控探针]支持节点管理和监控的ServerStatus 宝塔面板7.7.0版本及以下解锁付费插件开心版方法 宝塔面板版本降级至7.7.0方法
    一键网络重装系统 – 魔改版(适用于Linux / Windows)MyNodeQuery一款简洁好用的云监控探针宝塔面板如何取消绑定或强制登录宝塔账号宝塔面板版本降级至7.7.0方法宝塔面板7.7.0版本及以下解锁付费插件开心版方法Debian/Ubuntu SSH端口一键修改脚本及关闭防火墙
    各大网站收录、搜索引擎的提交入口 Vultr 推出免费云主机,用于鼓励全球创新 Zoov.co提供3个类型的免费空间 高达600GB空间 Plesk面板 PC测试移动端网站浏览器方法 V2安装管理一键脚本 centos7禁用或关闭ipv6的方法
    最近评论
    Meteor 发布于 3 周前(03月09日) 是的,要求的配置也要高很多,不一定所有服务器都适用
    夏日博客 发布于 3 周前(03月04日) 高版本的win系统越来越不好装了。
    侠客书 发布于 4 个月前(11月29日) 具体改了些什么?
    rtyu 发布于 6 个月前(10月07日) 来过,留个印迹~
    Adoncn 发布于 1 年前(01月10日) 不错!!!不错!!!
    标签聚合
    Linux wordpress 域名解析 活动 Linux技巧 VPS 技巧 虚拟主机
    友情链接
    • Anders Norén
    • Appurse
    • CSS参考手册
    • DeeTeam-迪提姆
    • Fatesinger
    • FreeSSL
    • gandi
    • Internetbs
    • Kevan's Blog
    • LogoMaker

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

    Theme Kratos Made By Seaton Jiang