计算机/互联网
计算机/互联网 > > 详情
使xmp, pre, plaintext的内容自动换行项目
2019-05-22 23:17 2KB.COM 阅读:776

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

<pre> 标签的一个常见应用就是用来表示计算机的源代码。

经常碰到的一个问题是如果一个代码上碰到有图片或者网页地址就会使代码很长,结果会造成页面撑开或者代码超出边界。非常难受,如果用overflow:hidden会将原来的代码隐藏掉,用overflow:auto会出现滚动条,代码也不方便阅读。

折腾了一个晚上搞定<pre>的内容自动换行的问题:

1.先尝试:word-wrap: break-word;将内容自动换行,IE,OP,Chrome,Safari都可以,FF就悲剧了。

2.查看pre的浏览器默认样式:

xmp, pre, plaintext {  
display: block;  
font-family: -moz-fixed;  
white-space: pre;  
margin: 1em 0;
}
都有white-space: pre,看white-space的值:
描述
normal默认。空白会被浏览器忽略。
pre空白会被浏览器保留。其行为方式类似 HTML 中的 <pre> 标签。
nowrap文本不会换行,文本会在在同一行上继续,直到遇到 <br> 标签为止。
pre-wrap保留空白符序列,但是正常地进行换行。
pre-line合并空白符序列,但是保留换行符。
inherit规定应该从父元素继承 white-space 属性的值。


有个pre-wrap,保留空白符序列,但是正常地进行换行。

这样就OK了,只要加上样式,就能使<pre>的内容自动换行了。

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


或者

xmp, pre, plaintext {white-space: pre-wrap;white-space: -moz-pre-wrap;white-space: -pre-wrap;white-space: -o-pre-wrap;word-wrap: break-word;}



2KB项目(www.2kb.com,源码交易平台),提供担保交易、源码交易、虚拟商品、在家创业、在线创业、任务交易、网站设计、软件设计、网络兼职、站长交易、域名交易、链接买卖、网站交易、广告买卖、站长培训、建站美工等服务

上一篇 下一篇

首页

搜索

订单

购物车

我的