CSS3文本
1.text-overflow
clip: 隱藏超出文本
ellipsis: 超出部分使用省略號
2.white-space
white-space 屬性設置如何處理元素內的空白
normal 默認。連續空白會被瀏覽器忽略
nowrap 文本不會換行,文本會在在同一行上繼續,直到遇到
標簽為止
pre 保留空白符和換行符
pre-wrap 保留空白符序列,但是正常地進行換行
pre-line 合并空白符序列,但是保留換行符
inherit 規定應該從父元素繼承 white-space 屬性的值
實現文字省略的效果:
white-space: nowrap;
overflow:hidden;
text-overflow:ellipsis;
文字省略.png
word-wrap
word-wrap 屬性允許長單詞或 URL 地址換行到下一行
- normal: 只在允許的斷字點換行
- break-word: 在長單詞或 URL 地址內部進行換行
word-break
word-break 屬性規定自動換行的處理方法
- normal 使用瀏覽器默認的換行規則。
- break-all 允許在單詞內換行
- keep-all 只能在半角空格或連字符處換行
text-shadow
設置文本的文字陰影,可以疊加多個陰影
text-shadow: x軸(X Offset) y軸(Y Offset) 模糊半徑(Blur) 顏色(Color)
文字陰影.png