css3 文本模型
阿新 • • 發佈：2017-08-19
符號 添加 hidden overflow 而且 cin width 這一 過程
我前期是一名前端開發者，經常會遇到關於文本模型的問題，很多地方我們會經常遇到這種問題。例如欄目的標題，在設計師給我們圖的時候並不會考慮到標題的長度，所以我們自己開發的過程中自己註意這一點。
首先和大家將一下文本模型的一些基本的屬性然後再針對一些案例去解析
<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 文本模型