今天 ,给大家变个魔术!!!
前言：在對網(wǎng)頁進行布局時，當我們設置div的的寬為固定寬時，理論上，內(nèi)容是不會超出div的，那你有沒有見過內(nèi)容超出div固定寬度的情況呢？今天我們就來看看到底是怎么一回事？
看分析之前，我們先看一下效果（可能有的伙伴都沒有看明白前言和標題所說的意思）
大家看看，我的div的寬和高背景已經(jīng)展示出來了，在該div中，寫了一些內(nèi)容，但是內(nèi)容不自動換行，直接超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>問題一出，給學生們開出高價籌碼——誰能知道是怎么回事，這周作業(yè)就可以免了。所謂“重賞之下必有勇夫”，為了不寫作業(yè)，學生們個個都摩拳擦掌，躍躍欲試，經(jīng)過一輪又一輪的回答之后，大家都沒有說出個所以然來。
突然，一名學生舉起手來，說他的可以，我就讓他來我電腦上來試試，沒想到在他電腦上可以卻在我電腦上不行。。。。
看大家都回答的差不多了，還是沒有說出個所以然來，我默默的拿起手，將div中的內(nèi)容替換了下，結果一運行，居然可以了！
反應慢的同學一看，哇，不禁的張開嘴，好神奇啊；反應快的同學一眼就看到了問題的所在。是的，問題就出在內(nèi)容上了，之前我們寫了一些英文字母放上去，瀏覽器當做你寫的是一個單詞呢，故不會換行，你寫成漢字就不一樣了，當內(nèi)容達到div邊緣時，就會自動換行。
這么看來，還神奇嗎？
往期精彩
自從有了這款辣椒醬，拌飯再也不用老干媽
2020-10-30
新機必裝！那些你不知道的實用技軟件在這里！文末免費獲取
2020-10-31
binarySearch與IndexOf的那些事兒~
2020-11-01
使用相對長度單位em布局網(wǎng)頁內(nèi)容
2020-11-02
使用相對長度單位rem布局網(wǎng)頁內(nèi)容
2020-11-03
集合還有這么優(yōu)雅的運算法？
2020-11-04
點分享
點點贊
點在看
總結
以上是生活随笔為你收集整理的今天 ,给大家变个魔术!!!的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 2021年打游戏用笔记本还是台式？
- 下一篇： 今天，我们就来抽个奖！