您的位置:首页 > Web前端 > HTML

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

2018-03-07 19:18 656 查看
转载地址:http://blog.csdn.net/kerryqpw/article/details/70174702

 html内容超出了div或p的宽度 让内容自动换行
<div id="testDiv">adfasfeBNFGHFJFasddddddddddddfJKUIszffdaddffsdgsdffgdgfsWEadfasfeBNFGHFJFasddddddddddddfJKUIszffdaddffsdgsdffgdgfsWEadfasfeBNFGHFJFasddddddddddddfJKUIszffdaddffsdgsdffgdgfsWEadfasfeBNFGHFJFasddddddddddddfJKUIszffdaddffsdgsdffgdgfsWEadfasfeBNFGHFJFasddddddddddddfJKUIszffdaddffsdgsdffgdgfsWEadfasfeBNFGHFJFasddddddddddddfJKUIszffdaddffsdgsdffgdgfsWE</div>
<p id="pDiv">adfasfeBNFGHFJFasddddddddddddfJKUIszffdaddffsdgsdffgdgfsWEadfasfeBNFGHFJFasddddddddddddfJKUIszffdaddffsdgsdffgdgfsWEadfasfeBNFGHFJFasddddddddddddfJKUIszffdaddffsdgsdffgdgfsWEadfasfeBNFGHFJFasddddddddddddfJKUIszffdaddffsdgsdffgdgfsWEadfasfeBNFGHFJFasddddddddddddfJKUIszffdaddffsdgsdffgdgfsWEadfasfeBNFGHFJFasddddddddddddfJKUIszffdaddffsdgsdffgdgfsWE</p>
css样式
<style type="text/css">
#testDiv{  width: 100%;
height: auto;
word-wrap:break-word;
word-break:break-all;
overflow: hidden;  }
</style>

css详解
word-wrap: normal|break-word;
normal只在允许的断字点换行(浏览器保持默认处理,默认值)。
break-word在长单词或 URL 地址内部进行换行。
word-break: normal|break-all|keep-all;
normal使用浏览器默认的换行规则。(默认值)
break-all允许在单词内换行。
keep-all只能在半角空格或连字符处换行。
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: