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

Bertha 。 2022-12-25 02:49 120阅读 0赞

![format_png][]

![format_png 1][]

前言：在对网页进行布局时，当我们设置div的的宽为固定宽时，理论上，内容是不会超出div的，那你有没有见过内容超出div固定宽度的情况呢？今天我们就来看看到底是怎么一回事？

看分析之前，我们先看一下效果（可能有的伙伴都没有看明白前言和标题所说的意思）

![format_png 2][]

大家看看，我的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中的内容替换了下，结果一运行，居然可以了！

![format_png 3][]

反应慢的同学一看，哇，不禁的张开嘴，好神奇啊；反应快的同学一眼就看到了问题的所在。是的，问题就出在内容上了，之前我们写了一些英文字母放上去，浏览器当做你写的是一个单词呢，故不会换行，你写成汉字就不一样了，当内容达到div边缘时，就会自动换行。

**这么看来，还神奇吗？**

**往期精彩**

[自从有了这款辣椒酱，拌饭再也不用老干妈][Link 1]

[2020-10-30][Link 1]

[![format_png 4][] ][Link 1]

[新机必装！那些你不知道的实用技软件在这里！文末免费获取][Link 2]

[2020-10-31][Link 2]

[![format_png 5][] ][Link 2]

[binarySearch与IndexOf的那些事儿~][binarySearch_IndexOf]

[2020-11-01][binarySearch_IndexOf]

[![format_png 6][] ][binarySearch_IndexOf]

[使用相对长度单位em布局网页内容][em]

[2020-11-02][em]

[![format_png 7][] ][em]

[使用相对长度单位rem布局网页内容][rem]

[2020-11-03][rem]

[![format_png 8][] ][rem]

[集合还有这么优雅的运算法？][Link 3]

[2020-11-04][Link 3]

[![format_png 9][] ][Link 3]

![format_png 10][]

![format_png 11][]

点分享

![format_png 12][]

点点赞

![format_png 13][]

点在看

[format_png]: /images/20221120/be32861e89c244abad19bafc2dc42095.png
[format_png 1]: /images/20221120/ce2e5f10bc324d3c981c5c226813a268.png
[format_png 2]: /images/20221120/0512869471784357ab8eba9071297e46.png
[format_png 3]: /images/20221120/b10f765303dc4f34a2b24d566ce4e0f7.png
[Link 1]: http://mp.weixin.qq.com/s?__biz=MzIxNjE1ODA5NA%3D%3D&chksm=978fef7da0f8666b66e75eef8907fb9a9e8e55a0ea9a2fd87cc986259f3c3866c05c77aaab98&idx=1&mid=2247497116&scene=21&sn=c72b9c0f8d08612b1187bf31d42c8e31#wechat_redirect
[format_png 4]: /images/20221120/4d6e07dc0b51440d8f1597fea66ca3a3.png
[Link 2]: http://mp.weixin.qq.com/s?__biz=MzIxNjE1ODA5NA%3D%3D&chksm=978fef43a0f866559246d6b1a44235025fe3c6658b9ae3ae5ad0c281fcb590e6e7f90c568e50&idx=1&mid=2247497122&scene=21&sn=9e3f76c4bcf2b1613de1e2d478130790#wechat_redirect
[format_png 5]: /images/20221120/d6bb219de686409e9b5f842ad3406919.png
[binarySearch_IndexOf]: http://mp.weixin.qq.com/s?__biz=MzIxNjE1ODA5NA%3D%3D&chksm=978fef2da0f8663b796ed49537e087039e66ad2e49d1179bd32a2fe9b97b2218874281a54e7a&idx=1&mid=2247497164&scene=21&sn=ea481730efb5c9b9d112968edf6adf23#wechat_redirect
[format_png 6]: /images/20221120/1942c7cafc074c1a967439841f222fae.png
[em]: http://mp.weixin.qq.com/s?__biz=MzIxNjE1ODA5NA%3D%3D&chksm=978fef0fa0f86619ccc5da9a14ea622899449a407ca3554e932e3f295735180f2346e2a19c46&idx=1&mid=2247497198&scene=21&sn=501918702c0d8e17602f6162990c01a6#wechat_redirect
[format_png 7]: /images/20221120/ae0f488f8c054a479fbd94457ecb4e45.png
[rem]: http://mp.weixin.qq.com/s?__biz=MzIxNjE1ODA5NA%3D%3D&chksm=978feceda0f865fb42c14275f337a1f9136e886c4b0121673c81caa156f6ff100db0a421813d&idx=1&mid=2247497228&scene=21&sn=eed1d46ded917837c2d9607ba62d6789#wechat_redirect
[format_png 8]: /images/20221120/219054ed96114c7c936c48f24c367fa0.png
[Link 3]: http://mp.weixin.qq.com/s?__biz=MzIxNjE1ODA5NA%3D%3D&chksm=978fecd6a0f865c0c4d41e702538c6fa75fb3d2591333fec70855fe56dd92569d90273cfbae8&idx=1&mid=2247497271&scene=21&sn=a389c3c78ec622b5be3821fe364a65f2#wechat_redirect
[format_png 9]: /images/20221120/21ff7e0fb6c8438c97857fde39a3800f.png
[format_png 10]: /images/20221120/a6d40cf3150a4fd3863c168a64b0b3d8.png
[format_png 11]: /images/20221120/f61c07ca0f004f798a900877b8a0f807.png
[format_png 12]: /images/20221120/949c03a9a8924a0a94fd2bf312c58e6d.png
[format_png 13]: /images/20221120/47549b230e894039be3b53c1ec8b9d60.png