前端前端分享Web前端之路

《图解CSS3》学习记录(03-文本省略与换行)

2017-05-10  本文已影响14人  石宝宝

文本省略:

通常在页面有限区域要显示较多内容的时候,可以使用文本省略。

使用text-overflow:ellipsis;配合white-space:nowrap、overflow:hidden属性一起使用,可以代替文本截取函数。这样做的最大有点是有助于搜索引擎的搜索。

单行文本省略css

word-wrap:

word-wrap属性实现长单词与URL地址的自动换行。word-wrap属性有两个值:

normal:浏览器默认值,浏览器只在半角空格或连字符的地方进行换行,长文本和URL地址都会超出容器的边框。

break-word:将内容在边界内换行(行末不会截断英文单词换行,但是当一行的宽度比长文本或者URL的长度短时,会被截断成两行或多行显示)。

中文都会自动换行。

word-break:

word-break用来决定自动换行的处理方法,共有三个值:

normal:中文到边界上的汉字换行,英文从整个单词换行;

break-all:可以强制截断英文单词,达到词内换行的效果。

keep-all:不允许字断开,中文把前后标点符号内的一个汉字短语整个换行,英文单词整个换行;

上一篇下一篇

猜你喜欢

热点阅读