重新认识HTML中的p标签

    HTML中p标签为段落标签,在正常情况下p标签中的内容会自动换行,如下代码:

[html]  view plain  copy
  在CODE上查看代码片 派生到我的代码片
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  2. <html xmlns="http://www.w3.org/1999/xhtml">  
  3.     <head>  
  4.         <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />  
  5.         <title>HTML中的p标签</title>  
  6.     </head>  
  7.   
  8.     <body>  
  9.         <p>Trouble will find you no matter where you go, oh oh No matter if you're fast, no matter if you're slow, oh oh The eye of the storm wanna cry in the morn, oh oh You're fine for a while but you start to lose control </p  
  10.     </body>  
  11. </html>  
        浏览器渲染后效果如下图:

        可是如果p标签中为非正常内容呢,如下代码:

[html]  view plain  copy
  在CODE上查看代码片 派生到我的代码片
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  2. <html xmlns="http://www.w3.org/1999/xhtml">  
  3.     <head>  
  4.         <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />  
  5.         <title>HTML中的p标签</title>  
  6.     </head>  
  7.   
  8.     <body>  
  9.         <p>000000000011111111112222222222333333333344444444445555555555666666666677777777778888888888999999999900000000001111111111222222222233333333334444444444555555555566666666667777777777888888888899999999990000000000111111111122222222223333333333444444444455555555556666666666777777777788888888889999999999</p  
  10.     </body>  
  11. </html>  
        浏览器渲染后效果如下图:

        那么怎么修复这个问题呢?非常简单——为p标签添加如下样式属性即可:

[css]  view plain  copy
  1. <style>  
  2.     p{  
  3.         word-wrap:break-word;  
  4.     }  
  5. </style>  
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值