css3 文本模型

標籤：flow   顯示   開發人員   word   方式   lsp   cli   限制   clip   

我前期是一名前端開發人員，經常會遇到關於文本模型的問題，很多地方我們會經常遇到這種問題。例如欄目的標題，在設計師給我們圖的時候並不會考慮到標題的長度，所以我們自己開發的過程中自己注意這一點。

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

<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;

 

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

 

 

 

 

 

 

 

 

 

 

 

 

css3 文本模型