今天 ,给大家变个魔术!!!
作者：互联网
前言：在对网页进行布局时，当我们设置div的的宽为固定宽时，理论上，内容是不会超出div的，那你有没有见过内容超出div固定宽度的情况呢？今天我们就来看看到底是怎么一回事？
看分析之前，我们先看一下效果（可能有的伙伴都没有看明白前言和标题所说的意思）
大家看看，我的div的宽和高背景已经展示出来了，在该div中，写了一些内容，但是内容不自动换行，直接超div的宽而出去，这是怎么回事？
代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#div1{
width: 200px;
height: 200px;
background: red;
}
</style>
</head>
<body>
<div id="div1">
testtesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttesttest
</div>
</body>
</html>问题一出，给学生们开出高价筹码——谁能知道是怎么回事，这周作业就可以免了。所谓“重赏之下必有勇夫”，为了不写作业，学生们个个都摩拳擦掌，跃跃欲试，经过一轮又一轮的回答之后，大家都没有说出个所以然来。
突然，一名学生举起手来，说他的可以，我就让他来我电脑上来试试，没想到在他电脑上可以却在我电脑上不行。。。。
看大家都回答的差不多了，还是没有说出个所以然来，我默默的拿起手，将div中的内容替换了下，结果一运行，居然可以了！
反应慢的同学一看，哇，不禁的张开嘴，好神奇啊；反应快的同学一眼就看到了问题的所在。是的，问题就出在内容上了，之前我们写了一些英文字母放上去，浏览器当做你写的是一个单词呢，故不会换行，你写成汉字就不一样了，当内容达到div边缘时，就会自动换行。
这么看来，还神奇吗？
往期精彩
点分享
点点赞
点在看
标签：变个,11,换行,魔术,2020,今天,网页内容,内容,div 来源： https://blog.51cto.com/u_12718584/2865775