前端開發(fā)中盒模型是所有元素的基礎(chǔ)，如果弄不懂盒模型的概念就很難開發(fā)出好的頁面，下面小千就來給大家介紹一下盒模型和解決前端文本溢出的代碼。

盒模型

盒模型是css布局的基石，它規(guī)定了網(wǎng)頁元素如何顯示以及元素間相互關(guān)系。css定義所有的元素都可以擁有像盒子一樣的外形和平面空間。即都包含內(nèi)容區(qū)、補(bǔ)白（填充）、邊框、邊界(外邊距)這就是盒模型。

PADDING的用法及值含義

MARGIN的用法及值含義

盒模型的大小計(jì)算方式

文本溢出

1.overflow

visible:默認(rèn)值，內(nèi)容不會(huì)被修剪，會(huì)呈現(xiàn)在元素框之外；

hidden：內(nèi)容會(huì)被修剪，并且其余內(nèi)容是不可見的；

scroll：內(nèi)容會(huì)被修剪，但是瀏覽器會(huì)顯示滾動(dòng)條，以便查看其余的內(nèi)容;

auto：如果內(nèi)容被修剪，則瀏覽器會(huì)顯示滾動(dòng)條，以便查看其他的內(nèi)容;

inherit：規(guī)定應(yīng)該從父元素繼承overflow屬性的值。

2.white-space

normal：默認(rèn)值，多余空白會(huì)被瀏覽器忽略只保留一個(gè)；

pre：空白會(huì)被瀏覽器保留；

pre-wrap：保留一部分空白符序列，但是正常的進(jìn)行換行；

pre-line:合并空白符序列，但是保留換行符；

nowrap:文本不會(huì)換行，文本會(huì)在同一行上繼續(xù)，直到遇到
標(biāo)簽為止;

3.text-overflow

clip：不顯示省略號(hào)（…），而是簡單的裁切;

ellipsis：當(dāng)對(duì)象內(nèi)文本溢出時(shí)，顯示省略標(biāo)記；

4.文本溢出變省略號(hào)設(shè)置

text-overflow屬性僅是：當(dāng)文本溢出時(shí)是否顯示省略標(biāo)記，并不具備其它的樣式屬性定義，要實(shí)現(xiàn)溢出時(shí)產(chǎn)生省略號(hào)的效果還需定義：

1）、容器寬度：width：value；（px、%，都可以）

2）、強(qiáng)制文本在一行內(nèi)顯示:white-space：nowrap;

3）、溢出內(nèi)容為隱藏：overflow：hidden；

4）、溢出文本顯示省略號(hào)：text-overflow：ellipsis;

注：必須是單行文本才能設(shè)置本文溢出！！！

以上就是盒模型和前端文本溢出的介紹了，同學(xué)們趕緊去自己實(shí)踐一下吧。

本文來自千鋒教育，轉(zhuǎn)載請(qǐng)注明出處。

與50位技術(shù)專家面對(duì)面20年技術(shù)見證，附贈(zèng)技術(shù)全景圖

總結(jié)

以上是生活随笔為你收集整理的前端技术分享：盒模型的概念和文本溢出解决办法的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。