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

最新推荐文章于 2022-04-20 13:44:49 发布

紫枫叶520

最新推荐文章于 2022-04-20 13:44:49 发布

阅读量5.7k

点赞数

分类专栏： JSP页面 css 文章标签： css elementui html .word-wrap word-break

本文链接：https://blog.csdn.net/zifengye520/article/details/52187255

版权

2 篇文章 0 订阅

订阅专栏

一、超出部分换行

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;并不会因为剩余空间不足以放置长单词而换行，而是继续在后面放置长单词，直到超出部分的时候，才会自动换行，如下图

关注