给力星

Web Developer

HTML标签pre_使用注意事项&&让复制到Word中的内容不带背景色

美团点评 2018 届校招内推开始啦!
参与内推 = 简历免筛选 + 多一次笔试 + 提前面试/提前拿 Offer
多一次机会,多一份把握,千万不要错过~
内推申请地址:https://wenjuan.meituan.com/survey/68332

<pre> 标签通常用于展示预格式化的文本,例如经常用于展示文本代码。其在使用上与 <div> 等其他标签没有太大区别,但由于其会保留标签中所有的空白与换行,因此在使用时还是有几个地方是需要注意的。

此外,使用 <pre> 标签也可以解决复制网页中的内容到 Word 中会带有背景色的问题。

pre标签

<pre> 标签通常用于展示预格式化的文本,默认使用等宽字体,并且保留所有的空白和换行,效果如下所示:

Text in a pre element
is displayed in a fixed-width
font, and it preserves
both      spaces and
line breaks

通过查看样式可以发现,Chrome 中 pre 的默认样式为:

pre {
    display: block;
    font-family: monospace;
    white-space: pre;
}

其中 monospace 也称为 fixed-width font(等宽字体,例如 Courier 和 Monaco),即每个字符所占据的水平空间是一样的,很适合用于展示代码片段。white-space 属性则声明了如何处理元素内的空白,值 pre 会保留元素内的空白(一般 HTML 中的连续空白会当成一个空格来处理),通过上述 pre 标签的展示,能很清楚的看出 pre 展示内容的特点。当然,pre 标签的字体等都是可以自己通过 CSS 来覆盖的。

巧用pre标签 – 让复制到Word中的内容不带背景色

通常,我们将网页中的内容复制到 Word 中时,都会遇到一个烦人的小问题:复制的内容是带有 HTML 格式的,带背景颜色时非常难看,得手动去掉格式。如下图所示:

从网页中复制的内容是带有HTML格式的从网页中复制的内容是带有HTML格式的

虽然熟练掌握 Word 的选择性粘贴功能或者无格式复制技巧是必要的,但是若能省掉这么一个去格式的操作也是极好的,这不,就有一个客服 MM 就给大象 Web 提了一个 bug: 将 web 中大象消息中的问题粘贴到 word 中会有背景色(嗯,毕竟她们经常需要复制大象中的消息,但这并不是 bug ~)。

那如何解决这个问题呢?一开始我的想法是,在执行复制操作的时候做监听,然后修改复制的内容为 text/plain 格式,但这种实现方式还得考虑复制的内容本身,例如带有图片会怎样,另外各浏览的兼容也是个问题,最终没法实现。

后来看了下各个 IM 的 Web 版,发现钉钉中的消息复制时是不会带有背景色的,其消息的展示使用了 pre 标签,而其他的 IM 都是用 div。然而微信用的也是 pre 标签,但还是会带有背景色,实在难以捉摸。

经过研究,发现采用如下的方式可以避免复制内容到 Word 时带有背景色:

<div style="background: gray;">
    pre标签的父元素必须设置背景色
    <pre>pre标签不设置背景色,这回就没有背景颜色了吧</pre>
</div>

效果如下图所示:

使用pre标签可使复制的内容不带有格式使用pre标签可使复制的内容不带有格式

比较诡异的一点是,pre 标签的父节点是一定要设置背景色的,设置 background: none; 之类的都不行。鉴于我对系统在复制网页内容时是怎么处理格式的原理还不清楚,因此这边也只能给出个解决方法,但还不知其所以然。

另外,这种方式并不能实现复制的时候不带格式,只是能去掉最碍眼的背景色而已。

pre 使用注意事项

pre 在使用时与 div 等元素没有太大区别,一般 pre 的场景是展示代码,这种情况下,需要对文本代码中的 <>字符实体进行转义,如下图所示。

pre中的文本代码需要进行转义pre中的文本代码需要进行转义

如果没有进行转义,否则会被解析成 HTML 元素(pre 内的 <code> 标签主要是起一个语义化的作用):

pre中的文本代码需要进行转义pre中的文本代码需要进行转义

前面说到,pre 标签特有的性质是保留了所有的空白和换行,因此在使用时要特别注意如下几点。

溢出

默认情况下,pre 中的文本的展示如同其在源代码中的样子,因此第一个问题便是,如果文本的长度超过了 pre 的宽度,展示时不会自动换行而是会溢出,如下图所示:

pre中的文本不会自动换行pre中的文本不会自动换行

若要自动换行,则需要加上 white-space 属性,即 white-space: pre-wrap;white-space 属性设置了如何处理元素内的空白,pre-wrap 表示保留空白符序列,但是正常地进行换行,效果如下图所示:

让pre中的文本自动换行让pre中的文本自动换行

空白

为什么需要这么一个 white-space 属性?为什么在网页中显示多个空格通常要转义成多个 &nbsp;

实际上,网页的显示是对空白、换行做了特殊处理的,即对空白、换行进行了合并,因此在我们平常书写带缩进的代码时,感受不到这点。但是,假如我们对 body 元素设置 white-space: pre (保留空白),那网页的样式将难以控制,如下图所示:

网页中的空白、换行会被自动合并网页中的空白、换行会被自动合并

在 pre 中,由于保留了所有的空白,因此要额外注意前后的空白、换行。例如,我们输出的某个“格式化”的源代码和其在网页中的效果如下图所示:

pre中的空白、换行会被保留pre中的空白、换行会被保留

这样子达不到我们所预期的效果,因此在输出 HTML 时,要特别注意额外的空白与换行,正确的姿势如下(也就是说不要有额外的空白与换行):

去掉pre中的多余空白、换行去掉pre中的多余空白、换行

当然,如果想要让 pre 的表现与 div 相似,则可以使用 white-space: pre-line;,表示合并空白符序列(也就是源代码中的多个空格,在展示时只作为一个空格),但是保留换行符。

pre 里不能有 p 元素

还有一点需要注意的是,不要将可以导致段落断开的标签(例如 <h1><p><address> 标签)放在 <pre> 所定义的块里,否则会产生多余的换行,如下图所示:

不要把p放在pre中不要把p放在pre中

不过万一真遇到了这种过不去的坎,可以给 p 加上 display: inline;,就能去掉多余的换行:

去掉p标签多余的换行去掉p标签多余的换行

参考资料

3条评论

  1. 我最近也遇到这个问题了,我发现在内容外层添加一个table就好使了

  2. 我用ubuntu14系统研究JVM,可是刚开始设置环境配置文件弄不了,可不可以写一篇关于此的blog,谢谢了

发表评论

电子邮件地址不会被公开。