其他分享
首页 > 其他分享> > 今天 ,给大家变个魔术!!!

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

作者:互联网

watermark,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_100,g_se,x_10,y_10,shadow_90,type_ZmFuZ3poZW5naGVpdGk=

watermark,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_100,g_se,x_10,y_10,shadow_90,type_ZmFuZ3poZW5naGVpdGk=

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

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

watermark,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_100,g_se,x_10,y_10,shadow_90,type_ZmFuZ3poZW5naGVpdGk=

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

watermark,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_100,g_se,x_10,y_10,shadow_90,type_ZmFuZ3poZW5naGVpdGk=

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

这么看来,还神奇吗?

往期精彩

自从有了这款辣椒酱,拌饭再也不用老干妈

2020-10-30

watermark,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_100,g_se,x_10,y_10,shadow_90,type_ZmFuZ3poZW5naGVpdGk=

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

2020-10-31

watermark,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_100,g_se,x_10,y_10,shadow_90,type_ZmFuZ3poZW5naGVpdGk=

binarySearch与IndexOf的那些事儿~

2020-11-01

watermark,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_100,g_se,x_10,y_10,shadow_90,type_ZmFuZ3poZW5naGVpdGk=

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

2020-11-02

watermark,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_100,g_se,x_10,y_10,shadow_90,type_ZmFuZ3poZW5naGVpdGk=

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

2020-11-03

watermark,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_100,g_se,x_10,y_10,shadow_90,type_ZmFuZ3poZW5naGVpdGk=

集合还有这么优雅的运算法?

2020-11-04

watermark,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_100,g_se,x_10,y_10,shadow_90,type_ZmFuZ3poZW5naGVpdGk=

watermark,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_100,g_se,x_10,y_10,shadow_90,type_ZmFuZ3poZW5naGVpdGk=

watermark,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_100,g_se,x_10,y_10,shadow_90,type_ZmFuZ3poZW5naGVpdGk=

点分享

watermark,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_100,g_se,x_10,y_10,shadow_90,type_ZmFuZ3poZW5naGVpdGk=

点点赞

watermark,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_100,g_se,x_10,y_10,shadow_90,type_ZmFuZ3poZW5naGVpdGk=

点在看

标签:变个,11,换行,魔术,2020,今天,网页内容,内容,div
来源: https://blog.51cto.com/u_12718584/2865775