关于pre标签里面的内容无法自动换行的问题

baidu_31509671 2015-11-03 04:33:49

在用pre标签时，加了一段css代码



pre, code { 

                     display: block; 

	overflow: auto; 

	background: #f4f4f4; 

	padding: 5px 10px; 

	border: 1px solid #eee; 

	whitewhite-space:pre-wrap; /* css-3 */    

	whitewhite-space:-moz-pre-wrap; /* Mozilla, since 1999 */    

	whitewhite-space:-pre-wrap; /* Opera 4-6 */    

	whitewhite-space:-o-pre-wrap; /* Opera 7 */    

	word-wrap:break-word; /* Internet Explorer 5.5+ */  

	white-space: pre-wrap; /* Firefox */ 

}

网上说是可以实现自动换行，但是经过试验，内容只有英文或者只有数字的时候，还是无法自动换行，该怎么解决

...全文

774 4 打赏收藏转发到动态举报

写回复

用AI写文章

4 条回复

切换为时间正序

请发表友善的回复…

发表回复

baidu_31509671 2015-11-05

打赏
举报

宽度也加了，还是不行，我加的是带%的宽度，没有用

风中的少年 2015-11-03

打赏
举报

再给它设个宽度试试。。。。。

风中的少年 2015-11-03

打赏
举报

我的浏览器是正常的，你的是不是被其他样式影响了呢？

风中的少年 2015-11-03

打赏
举报

加上： white-space: pre-wrap; word-wrap: break-word;

使用

标签，并设置其样式如下：复制代码代码如下: pre{ white-space:pre-wrap;/*css-3*/ white-space:-moz-pre-wrap;/*Mozilla,since1999*/ white-space:-pre-wrap;/*Opera4-6*/ white-space:-o-pre-wrap;/*Opera7*/ word-wrap:break-word;/*InternetExplorer5.5+*/　　} 　　该CSS方案可让pre标签内的文本自动换行，我在我有的浏览器上都测试了一下，全部支持，IE6，IE7,IE8,Fi

pre 元素可定义预格式化的文本。被包围在 pre 元素中的文本通常会保留空格和换行符，下面为大家介绍下如何让pre标签自动换行，感兴趣的朋友可以参考下

这时候，你可以使用overflow:auto; (当代码超出容器边界的时候，显示滚动框)，但这个方法也并不适用于所有主流浏览器，一些浏览器会直接截断超出的内容。我们都知道

 标签可定义预格式化的文本，一个常见应用就是用来表示计算机的源代码。被包围在 pre 元素中的文本通常会保留空格和换行符，但不幸的是，当你在标签里面写代码的时候，如果你没有手动换行，它也会给你保留，而不会自动换行。
这时候，你可以使用overflow:auto; (当代码超出容器边界的时候，显示滚动框)， 但这个方法也并不适用于所有主流浏览器，一些浏览器会直接截断超出的内容 。

由于本站中使用源码的

html的

标签用可定义预格式化的文本。被包围在 pre 元素中的文本通常会保留空格和换行符。而文本也会呈现为等宽字体。而为了限制文本显示的范围，一般使用div+css设定自动换行或缩略等样式。对于未知的文本格式，如果要求文本单行过长时换行显示，并且保留原文本的空格和换行符，就可以通过div+pre标签的组合，再分别设定各自的样式来实现（pre标签一般不适用width属性）复制代码代码如下: <!DOCTYPE html PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” “http://www.w3.org/TR/htm

资源下载链接为： https://pan.quark.cn/s/abbae039bf2a HTML字符串实现自动换行