php输出pre自动换行,解决 html pre 标签的内容自动换行的问题

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

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

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

如何解决

的内容自动换行的问题：

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

点击查看demo

2.查看了pre的浏览器默认样式：xmp, pre, plaintext {

display: block;

font–family:–moz–fixed;

white–space: pre;

margin:1em0;

}

都有这个white-space: pre，看看white-space的值：

值描述normal默认。空白会被浏览器忽略。pre空白会被浏览器保留。其行为方式类似 HTML 中的

 标签。nowrap文本不会换行，文本会在在同一行上继续，直到遇到  标签为止。pre-wrap保留空白符序列，但是正常地进行换行。pre-line合并空白符序列，但是保留换行符。inherit规定应该从父元素继承 white-space 属性的值。

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

这样就OK了搞定，我们只要加上样式：pre {

white-space: pre-wrap;

word-wrap: break-word;

}

就能使

的内容自动换行了。

php输出pre自动换行,解决 html pre 标签的内容自动换行的问题相关推荐

关于使得p标签以及span标签里面内容自动换行css实现
只需要给p标签加上以下代码即可 p{word-wrap: break-word;word-break: break-all;overflow: hidden; }
让html 自动换行,怎样让HTML 表格中内容自动换行？？
0032 Java学习笔记-类加载机制-初步 JVM虚拟机 Java虚拟机有自己完善的硬件架构(处理器.堆栈.寄存器等)和指令系统 Java虚拟机是一种能运行Java bytecode的虚拟机 JVM ...
如何在前台输出代码＜xmp＞，标签，并且是内容自动换行
背景项目开发完成后,我写了一个生成数据字典的静态页面,用于提供给后期的维护人还或是项目验收使用,这个静态页中包含了表的信息和字段等的备注,在生成表备注时,由于备注中写了xml标签或静态页面标签,导致 ...
使xmp, pre, plaintext的内容自动换行
元素可定义预格式化的文本.被包围在 pre 元素中的文本通常会保留空格和换行符.而文本也会呈现等宽字体. 标签的一个常见应用就是用来表示计算机的源代码. 经常碰到的一个问题是如果一个代码上碰到有图片或 ...
使用echart的雷达图的时候,如果文字越界的解决办法记录,标签文字自动换行
使用echart的雷达图的时候,如果文字越界的解决办法记录,标签文字自动换行前几天项目中有一个图表的是用echart生成的,遇到一个问题,就是在手机端显示的售时候,如果文字太长就会超出div,之前的 ...
【转】解决长串英文字母显示不能自动换行的问题和td中汉字自动换行 CSS强制不换行
解决长串英文字母显示不能自动换行的问题和td中汉字自动换行 && CSS强制不换行例如:aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa不 ...
html自动换行span,HTMLspan标签如何做到自动换行？HTMLspan标签的用法介绍
本篇文章主要的为大家讲述的是HTML span标签是怎么做到自动换行的,介绍了span的七个属性的使用和介绍.接下来我们一起来看这篇文章吧首先我们介绍的肯定是如何做到让span标签自动换行的,我们先 ...
TextView文本尾部添加标签，支持自动换行
文章目录 TextView文本尾部添加标签,支持自动换行需求使用SpannableStringBuilder + ImageSpan实现代码实现参考 TextView文本尾部添加标签,支持自动 ...
htmltd文本自动换行,完美解决table中td里面的内容自动换行
完美解决table中td里面的内容自动换行2018-08-03 11:50 对于将td里面的内容自动换行,在很久以前就遇到的了,但是一直没有完美的解决. 今天要打印一个报表,有一列中的内容太长,将ta ...

php输出pre自动换行,解决 html pre 标签的内容自动换行的问题

php输出pre自动换行,解决 html pre 标签的内容自动换行的问题相关推荐

最新文章

热门文章