文档章节

使pre的内容自动换行

j
 jims
发布于 2016/03/08 09:13
字数 457
阅读 44
收藏 0

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

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

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

点击查看:http://www.css88.com/demo/pre/index-1.html

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

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

点击查看:http://www.css88.com/demo/pre/index-2.html

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 {
white-space: pre-wrap;
word-wrap: break-word;
}

就能使<pre>的内容自动换行了。

点击查看:http://www.css88.com/demo/pre/

本文转载自:

j
粉丝 4
博文 172
码字总数 30033
作品 0
合肥
私信 提问
IE6 中,如何令 table 、td 内的 pre 内容在容器边缘强制自动换行?

我在表格的单元格里有个 pre ,形如:   ……        ……      长长长长长的字符串     ……      …… 我已经定义了如下 CSS : pre {   white-space: pre-wrap;  ...

自由狼-台风
2015/03/17
212
0
css防止ul下的li换行(li超出宽度变成…)代码

在使用css结合div布局的时候碰到了一个问题。 在一个规定宽度大小的ul里边 我把li的宽度定义为自动。企图让li根据内容长度来自动向左对齐排列。 例如宽度为210px的ul里 分别有4个li 这个4个l...

功夫panda
2013/01/09
8.1K
2
span标签里的内容过长如何设置自动换行

span标签是被用来组合文档中的行内元素。span 没有固定的格式表现。当对它应用样式时,它会产生视觉上的变化。当内容过长时,我们可以通过overflow: hidden;设置隐藏溢出部分,但有的应用场景...

it1000001001
2017/06/12
1K
0
文本溢出text-overflow

本文转载于:猿2048网站文本溢出text-overflow

前端老手
08/28
17
0
div、p、td 的强制不换行及强制换行

关于强制不换行、强制换行的话题在网上已经被讨论了无数次,但我发现都不够全面,没有充分考虑各种浏览器、各种标签等情况,以致不兼容,所以我再来说说。由于 div 和 p 在本文的讨论中,效果...

王超
2014/03/20
1K
0

没有更多内容

加载失败,请刷新页面

加载更多

聊聊nacos的NacosDiscoveryAutoConfiguration

序 本文主要研究一下nacos的NacosDiscoveryAutoConfiguration NacosDiscoveryAutoConfiguration nacos-spring-boot-project/nacos-discovery-spring-boot-autoconfigure/src/main/java/com/a......

go4it
29分钟前
4
0
如何保证消息的顺序性?

面试题 如何保证消息的顺序性? 面试官心理分析 其实这个也是用 MQ 的时候必问的话题,第一看看你了不了解顺序这个事儿?第二看看你有没有办法保证消息是有顺序的?这是生产系统中常见的问题...

米兜
34分钟前
7
0
变量求解:RMT函数

1. RMT函数:计算贷款每月付款额 = PMT (贷款利率,付款限期,本金) 2.单变量求解: 数据选项卡----> 模拟分析------>单变量求解:单变量求解前必须先执行PMT函数...

东方墨天
35分钟前
2
2
网络安全市场需求

最近,网络安全技能差距的热门话题流传开来。技能差距经常被紧急讨论,可以看出它在实践中的作用是很大的。但信息安全是一门广泛的学科,所以在谈论“技能差距”时需要更具体。有专家表示,真...

linuxCool
54分钟前
3
0
饿了么快应用初体验

作者:饿了么 顾诚 为什么我们选择了快应用 在很长一段时间里,原生饿了么应用对于新用户来说体验成本略高,对于迫切想要点餐的老用户操作有点繁琐;而 Web 版的饿了么应用在体验、速度、功能...

前端老手
57分钟前
5
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部