pre标签最常见的应用就是用来表示计算机的源代码,在<pre> 标签里的内容,通常会保留空格和换行符。
实际使用中,我们经常遇到一个问题就是如果代码很长,则会撑开页面而不自动换行。
如果用overflow:hidden那么会将原来的代码隐藏掉,用overflow:auto则会出现滚动条,代码也不方便阅读。
其实只要添加以下css代码即可解决此问题:
pre{ white-space:pre-wrap; word-wrap: break-word; }
white-space:pre-wrap; 保留空白符序列,但是正常地进行换行。
word-wrap: break-word; 在长单词或 URL 地址内部进行换行。