哈嘍大家好，我是作者“未來”，本期分享的內容是Web前端系列課程，本系列總共29個階段，堅持學習3個月蛻變為Web前端高手哦！

志同道合的小伙伴跟我一起學習交流哦！

第二階段 CSS3

17 CSS溢出文字隱藏

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

1 鼠標樣式cursor

設置或檢索在對象上移動的鼠標指針采用何種系統預定義的光標形狀。

cursor:default小白

pointer小手

move移動

text文本

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

pointer ie6以上都支持的盡量用

2 輪廓線outline

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

但是我們都不關心可以設置多少，我們平時都是去掉的。

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

3 防止拖拽文本域resize

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

4 行內塊和文字對齊

Vertical-align垂直對齊

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

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

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

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

vertical-align ：baseline、top 、 middle 、 bottom

設置或檢索對象內容的垂直對齊方式。

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

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

5 去除圖片底側縫隙

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

解決的方法就是：

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

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

6 word-break 自動換行

normal使用瀏覽器默認的換行規則。

break-all允許在單詞內換行。

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

主要處理英文單詞

7 white-space

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

normal：默認處理方式

nowrap：強制在同一行內顯示所有文本，直到文本結束或者遭遇br標簽對象才換行。

8 超出的部分省略號顯示

text-overflow文字溢出

text -overflow:clip / ellipsis

設置或檢索是否使用一個省略標記(…)標示對象內文本的溢出

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

ellipsis：當對象內文本溢出時顯示省略標記(…)

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

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

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

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。