今天 ,给大家变个魔术!!!

前言：在对网页进行布局时，当我们设置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中的内容替换了下，结果一运行，居然可以了！