IT技术学习网
IT技术学习网
您的位置: 主页 > 编程技术 > css >

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

2014-10-25 10:09 来源: IT技术学习网原创 阅读:

在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;才能实现自动换行。

html pre标签自动换行的css实现
转载需注明出处:IT技术学习网 http://www.itjsxx.com/css/524.html

评论文章 html pre标签自动换行的css实现
评论列表(网友评论仅供网友表达个人看法,并不表明本站同意其观点或证实其描述)
  • zhaojiaoyang1
    2017-05-20 12:58:21发表

    那么此人很有可能是个极有城府[url=http://songxuan.ce.c-c.com]粮食机设备[/url] [url=http://www.txooo.com/muying/]玩具加盟[/url] [url=http://guangzhousg.ce.c-c.com]旅游景区小吃车[/url] [url=http://wxjstj

  • abaobao
    2017-04-18 12:15:01发表

    他们最擅长的是刺探情报以及盗掘坟墓[url=http://www.cwbol.com/rqys/nxys/]女人健康养生[/url] [url=http://www.cwbol.com/ysys/scbk/]哪些水果可以吃[/url] [url=http://www.cwbol.com/rqys/yeys/188025.html]导致

  • xiaoman2
    2017-04-18 11:52:36发表

    心中想着找到狄晴好生安慰于她[url=http://www.duoye.net/]热点资讯[/url] [url=http://www.duoye.net/]资讯网[/url] [url=http://www.duoye.net/fhdq/12193.html]SNIS-714[/url] [url=http://www.duoye.net/fhdq/85

IT技术学习网 - 关于我们 - 联系我们 - 版权声明 - 网站地图