iconfont 和 行高,文字的水平和垂直對齊
阿新 • • 發佈:2022-04-01
一、iconfont
具體見第79節
二、行高 line - height
1. 指的是文字佔有的實際高度;
2. 可以指定一個大小(px),也可以設定一個整數,此時行高是字型的倍數;
3. 行高會在字型框上下平均分配(字型框:字型所在的格子,設定 font-size 實際上就是在設定字型框高度);
4. 可以將行高設定為和高度一樣的值,使單行文字在一個元素中垂直居中 ;
三 、水平和垂直對齊
1. 文字的水平對齊:text - align;
-- 可選值 : left ,right,center,justify(兩端對齊)
2. 垂直對齊 :vertical - align ;
-- 可選值: baseline(預設值,基線對齊,如果有圖片,不要設定這個) ,top,bottom,middle ,x px ;
四、其他
1. text - decoration:
--設定文字修飾
--可選值: none 什麼都沒有;
underline 下劃線;
line - through 刪除線;
over - line 上劃線;
2. white -space
--設定網頁處理空白
--可選值: normal 正常;
nowrap 不換行;
pre 保留空白;
--eg :
.abc{ width : 200px ; white - space : nowrap ; overflow : hidden ; text-overflow : ellipsis(溢位內容設定省略號)}
效果:他害怕所有人的眼光,總覺…(要實現這個效果,以上四個屬性缺一不可)