css3 文本模型

本文轉載於:猿2048網站css3 文本模型

我前期是一名前端開發者，常常會遇到關於文本模型的問題，不少地方咱們會常常遇到這種問題。例如欄目的標題，在設計師給咱們圖的時候並不會考慮到標題的長度，因此咱們本身開發的過程當中本身注意這一點。

首先和你們將一下文本模型的一些基本的屬性而後再針對一些案例去解析

<text>模型屬性

      

屬性	描述	Css
Text-overflow	規定當文本溢出包含元素時發生的事情	3
text-fill-color	給文字指定填充顏色
text-stroke	給文字描邊
text-stroke-width	給文字描邊的寬度
text-stroke-color	給文字描邊的顏色
Text-shadow	向文本添加陰影	3
Word-break	規定非中日韓文本的換行規則	3
Word-wrap	容許對長的不可分割的單詞進行分割並換行到下一行	3

 Text-overflow

值	描述
Clip	修建文本
Ellipsis	顯示省略符號來表明被修剪的文本
String	使用給定的字符串來表明被修剪的文本

案例一:限制字數 經過overflow:hidden

 

顯示圖如上，這種方式須要限制高度和行高，要將內容控制在現實範圍內，因此這種方式是不大推薦的方式，這裏沒有用到文本模型

案例二：經過text-overflow: ellipsis;

 

這種方式是開發項目中比較想要的效果，由於他對行高無要求，並且限制了換行的行爲