前端学堂(好切网)-Web前端开发,网页切图教程分享平台
前端学堂(好切网),PS网页切图,专业WEB前端外包网站
您的位置:首页 > 前端学堂 > HTML/CSS

如何让pre标签里的内容自动换行

2017-03-23 15:53:45分类:HTML/CSS阅读(268)

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 地址内部进行换行。
原文链接:http://www.hqhtml.com/htmlcss/20.html,出自好切网(前端学堂),转载请注明出处。
相关阅读 ~
推荐文章

© 2016 好切网(hqhtml.com) 长春诺阳科技有限公司(网页前端切图) 版权所有 吉ICP备15007500号