哈嘍大家好，我是作者“未來”，本期分享的內(nèi)容是Web前端系列課程，本系列總共29個階段，堅持學(xué)習(xí)3個月蛻變?yōu)閃eb前端高手哦！

志同道合的小伙伴跟我一起學(xué)習(xí)交流哦！

第二階段 CSS3

17 CSS溢出文字隱藏

所謂的界面樣式，就是更改一些用戶操作樣式，比如更改用戶的鼠標(biāo)樣式，表單輪廓等。但是比如滾動條的樣式改動受到了很多瀏覽器的抵制，因此我們就放棄了，防止表單域拖拽。

1 鼠標(biāo)樣式cursor

設(shè)置或檢索在對象上移動的鼠標(biāo)指針采用何種系統(tǒng)預(yù)定義的光標(biāo)形狀。

cursor:default小白

pointer小手

move移動

text文本

盡量不要用hand因為火狐不支持

pointer ie6以上都支持的盡量用

2 輪廓線outline

是繪制于元素周圍的一條線，位于邊框邊緣的外圍，可起到突出元素的作用。

但是我們都不關(guān)心可以設(shè)置多少，我們平時都是去掉的。

最直接的寫法是：outline：0；或者 outline:none；

3 防止拖拽文本域resize

resize:none這個單詞可以防止火狐谷歌等瀏覽器隨意的拖動文本域。

4 行內(nèi)塊和文字對齊

Vertical-align垂直對齊

以前我們講過讓帶有寬度的塊級元素居中對齊，是 margin：0 auto;

以前我們還講過讓文字居中對齊，是 text-align:center；

但是我們從來沒有講過有垂直居中的屬性，我們的媽媽一直很擔(dān)心我們的垂直居中怎么做。

vertical-algn垂直對齊，這個看上去很美好的一個屬性，實際有著不可捉摸的脾氣，否則我們也不會這么晚來講解。

vertical-align ：baseline、top 、 middle 、 bottom

設(shè)置或檢索對象內(nèi)容的垂直對齊方式。

vertical-align不影響塊級元素中的內(nèi)容對齊，它只針對于行內(nèi)元素或者行內(nèi)塊元素，特別是行內(nèi)塊元素，通常用來控制圖片/表單與文字的對齊

所以我們知道，我們可以通過 vertical-align控制圖片和文字的垂直關(guān)系了。默認的圖片會和文字基線對齊。

5 去除圖片底側(cè)縫隙

有個很重要特性你要記住：圖片或者表單等行內(nèi)塊元素，他的底線會和父級盒子的基線對齊。這樣會造成一個問題，就是圖片底側(cè)會有一個空白縫隙。

解決的方法就是：

1 給 img添加vertical-align:middle / top等等。讓圖片不要和基線對齊。

2 給img添加 display:bock;轉(zhuǎn)換為塊級元素就不會存在問題了。

6 word-break 自動換行

normal使用瀏覽器默認的換行規(guī)則。

break-all允許在單詞內(nèi)換行。

keep-all只能在半角空格或連字符處換行。

主要處理英文單詞

7 white-space

設(shè)置或檢索對象內(nèi)文本顯示方式。通常我們使用于強制一行顯示內(nèi)容

normal：默認處理方式

nowrap：強制在同一行內(nèi)顯示所有文本，直到文本結(jié)束或者遭遇br標(biāo)簽對象才換行。

8 超出的部分省略號顯示

text-overflow文字溢出

text -overflow:clip / ellipsis

設(shè)置或檢索是否使用一個省略標(biāo)記(…)標(biāo)示對象內(nèi)文本的溢出

clip：不顯示省略標(biāo)記(…)，而是簡單的裁切

ellipsis：當(dāng)對象內(nèi)文本溢出時顯示省略標(biāo)記(…)

注意:一定要首先強制一行內(nèi)顯示，再次和 overflow屬性搭配使用?

看不懂的小伙伴不要氣餒，后續(xù)的分享中將持續(xù)解釋，只要你跟著我分享的課程從頭到尾去學(xué)習(xí)，每篇文章看三遍，一個月后，回過頭來看之前的文章就會感覺簡單極了。

本章已結(jié)束，下篇文章將分享《18 CSS精靈技術(shù)》小伙伴們不要錯過喲！

總結(jié)

以上是生活随笔為你收集整理的img 隐藏_CSS3界面样式和溢出文字隐藏overflow的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

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