html内容超出了div或p的宽度 让内容自动换行

末蓝、 2022-05-30 07:38 370阅读 0赞

转载地址：http://blog.csdn.net/kerryqpw/article/details/70174702

html内容超出了div或p的宽度 让内容自动换行 

  1. <div id="testDiv">adfasfeBNFGHFJFasddddddddddddfJKUIszffdaddffsdgsdffgdgfsWEadfasfeBNFGHFJFasddddddddddddfJKUIszffdaddffsdgsdffgdgfsWEadfasfeBNFGHFJFasddddddddddddfJKUIszffdaddffsdgsdffgdgfsWEadfasfeBNFGHFJFasddddddddddddfJKUIszffdaddffsdgsdffgdgfsWEadfasfeBNFGHFJFasddddddddddddfJKUIszffdaddffsdgsdffgdgfsWEadfasfeBNFGHFJFasddddddddddddfJKUIszffdaddffsdgsdffgdgfsWE</div>
  2. <p id="pDiv">adfasfeBNFGHFJFasddddddddddddfJKUIszffdaddffsdgsdffgdgfsWEadfasfeBNFGHFJFasddddddddddddfJKUIszffdaddffsdgsdffgdgfsWEadfasfeBNFGHFJFasddddddddddddfJKUIszffdaddffsdgsdffgdgfsWEadfasfeBNFGHFJFasddddddddddddfJKUIszffdaddffsdgsdffgdgfsWEadfasfeBNFGHFJFasddddddddddddfJKUIszffdaddffsdgsdffgdgfsWEadfasfeBNFGHFJFasddddddddddddfJKUIszffdaddffsdgsdffgdgfsWE</p>

css样式

  1. <style type="text/css">
  2. #testDiv{  width: 100%;  
  3.     height: auto;  
  4.     word-wrap:break-word;  
  5.     word-break:break-all;  
  6.     overflow: hidden;  }
  7. </style>

css详解

  1. word-wrap: normal|break-word;











normal 只在允许的断字点换行（浏览器保持默认处理，默认值）。
break-word 在长单词或 URL 地址内部进行换行。 
  1. word-break: normal|break-all|keep-all;















normal 使用浏览器默认的换行规则。（默认值）
break-all 允许在单词内换行。
keep-all 只能在半角空格或连字符处换行。

发表评论

表情：
评论列表 （有 0 条评论，370人围观）

还没有评论，来说两句吧...

相关阅读