页面内容超出范围解决方法

一、超出部分换行

1.word-wrap和word-break，要给容器加上width

如下面一个div

<style type="text/css">
	div{
		width:300px;
		border:1px solid;
	}
</style>
<div>word1 word2 word3333333333333333333333333333333333333333</div>

如果没有上面2个属性，长单词会在剩余空间不足时，自动换行，但是太长的时候，会超出容器，如下图

word-wrap和word-break是有区别的，word-wrap:break-word;会在剩余空间不足以放置长单词的时候，就开始换到下一行显示，超出容器的部分也会自动换行，如下图

而word-break:break-all;并不会因为剩余空间不足以放置长单词而换行，而是继续在后面放置长单词，直到超出部分的时候，才会自动换行，如下图