重新认识HTML中的p标签

最新推荐文章于 2024-09-30 09:59:00 发布

cl5417

最新推荐文章于 2024-09-30 09:59:00 发布

阅读量907

点赞数

本文探讨了HTML中p标签在遇到长字符串时的换行问题，并提供了一个简单的解决方案，即通过CSS的word-wrap属性来实现自动换行。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

[html]view plaincopy 
   
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
 <html xmlns="http://www.w3.org/1999/xhtml">  
     <head>  
         <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />  
         <title>HTML中的p标签</title>  
     </head>  
   
     <body>  
         <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  
     </body>  
 </html>  

浏览器渲染后效果如下图：

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

[html]view plaincopy 
   
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
 <html xmlns="http://www.w3.org/1999/xhtml">  
     <head>  
         <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />  
         <title>HTML中的p标签</title>  
     </head>  
   
     <body>  
         <p>000000000011111111112222222222333333333344444444445555555555666666666677777777778888888888999999999900000000001111111111222222222233333333334444444444555555555566666666667777777777888888888899999999990000000000111111111122222222223333333333444444444455555555556666666666777777777788888888889999999999</p  
     </body>  
 </html>  

浏览器渲染后效果如下图：

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

[css]view plaincopy 
   
 <style>  
     p{  
         word-wrap:break-word;  
     }  
 </style>  