html pre标签自动换行的css实现

在html语言中,pre标签中的文本会保留空格和换行符,因此常用来原样输出程序代码。

不过,pre标签的这个功能也导致了它不能自动换行的问题。

我们使用如下的css,可以让pre标签自动换行

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

其中:

white-space: pre-wrap;表示:保留空白符序列,但是正常地进行换行。

word-wrap: break-word表示:允许长单词或 URL 地址换行到下一行。

经测试,在IE10,chrome下,只需要white-space: pre-wrap;就可以实现自动换行

在IE6下,pre标签必须加上word-wrap: break-word;才能实现自动换行。

本站部分内容来源互联网,如果有图片或者内容侵犯您的权益请联系我们删除!

相关文档推荐

做css开发时,我们经常碰到文本内容过长导致页面不美观已经影响用户阅读效果,不如链接过长将div撑大等等。本文章向码农们介绍css 文本及链接自动换行的几种方法。
css word-break:break-all和word-wrap:break-word都是能使其容器如DIV的内容自动换行。但二者之间是有区别的,本文章向码农们介绍css 自动换行 word-break:break-all和word-wrap:break-word的区别。
在网页布局中,经常遇到长英文或链接在div等盒子里排成一排显示不会自动随盒子宽度限制而自动换行。该如何解决这个问题呢?本文章通过实例向大家讲解css长英文或链接如何自动换行。
如何让长长的url自动换行呢。一下是一个方法
css li 去掉点的样式写法,其实就是利用css的list-sytle样式来实现的。
早前在《CSS3 box-shadow》一文中详细介绍了Box-shadow的使用。他可以让我们轻松的实现盒子阴影效果,多个站点都有这方面的介绍。但记得有一回在群里和朋友讨论这个属性时发生热烈的讨论。讨论的主题就是:box-shadow