文字溢出處理、背景圖片、企業開發經驗

不少時候，單行文字所佔寬度大於容器寬，就會產生文字溢出，因此如今主要是介紹一下文字溢出的解決辦法和背景圖片的一些知識。

1.文字溢出容器處理：

（1）單行文本：

三件套（css代碼部分）：

white-space：nowrap；（禁止換行）
overflow：hidden；（溢出部分隱藏）
text-overflow：ellipsis；（文字打點）(當文字的寬度小於容器的寬度時，沒有變化，當文字的寬度大於容器的寬度時就打點顯示)
複製代碼

（2）多行文本只作截斷，不作打點（打點是手寫上去的）:

先讓行高和容器的高成比 顯示（好比容器40px，line-height是20px，你也就只能放兩行，因此得把數字算好），而後溢出部分隱藏處理。

2.背景圖片：

[

1. background-image：url（這裏填路徑）；：引入背景圖片
2. background-size：（單位是px/%，這裏填兩個值）；：背景圖片的大小（寬、高）
3. background-repeat：no-repeat：圖片不重複（禁止平鋪），默認爲 repeat，就是當圖片鋪不滿容器的時候，他會重複的鋪滿容器，no-repeat 就是禁止平鋪，鋪不滿就鋪不滿。還有兩個值 repeat-x（x 軸平鋪）、repeat-y（y 軸平鋪）。通常咱們用的是 no-repeat。
4. background-position：；圖片的位置 xy，（在 css 裏，x 軸右爲正，y 軸下爲正），兩個值也能夠用 left/right/top/bottom/center 或者 百分數來使用，例如，left top 即爲左上方，50% 50%就是正中間，即 center center。（通常咱們也儘可能寫center center，由於這裏50%和以前的50%不一樣）

]

3.企業開發經驗

（1）圖片替代文字:

當咱們網速很差的時候，圖片加載不出來（系統會把 css 和 js 屏蔽掉），就得用文字代替， 當網速好的時候顯示圖片，隱藏文字，這就須要在 HTML 裏邊加上文字信息（這個只能用於背景圖片）

方法一：text-indent：；（文字首行縮進，值要大於容器的寬），而後white-space：nowrap；（禁止換行），再加上overflow：hidden；（文字溢出部分隱藏）就能夠了。

方法二：背景上是能夠展現背景圖片和背景顏色的，可是不能展現內容，那麼就給容器hight：0px；（先把容器的高清零），而後再用padding-top,padding就會把圖片撐開，這時圖片就顯示出來了，文字就頂出去了，再overflow：hidden； （文字溢出部分隱藏）就能夠了。

注意：

行級元素只能套行級元素，塊級元素能夠套任何元素，可是，p 標籤裏不能套 div，不然p會被砍斷（並且a標籤裏也不能套 a 標籤）。