《图解CSS3》学习记录(03-文本省略与换行)
2017-05-10 本文已影响14人
石宝宝
文本省略:
通常在页面有限区域要显示较多内容的时候,可以使用文本省略。
使用text-overflow:ellipsis;配合white-space:nowrap、overflow:hidden属性一起使用,可以代替文本截取函数。这样做的最大有点是有助于搜索引擎的搜索。
单行文本省略cssword-wrap:
word-wrap属性实现长单词与URL地址的自动换行。word-wrap属性有两个值:
normal:浏览器默认值,浏览器只在半角空格或连字符的地方进行换行,长文本和URL地址都会超出容器的边框。
break-word:将内容在边界内换行(行末不会截断英文单词换行,但是当一行的宽度比长文本或者URL的长度短时,会被截断成两行或多行显示)。
中文都会自动换行。
word-break:
word-break用来决定自动换行的处理方法,共有三个值:
normal:中文到边界上的汉字换行,英文从整个单词换行;
break-all:可以强制截断英文单词,达到词内换行的效果。
keep-all:不允许字断开,中文把前后标点符号内的一个汉字短语整个换行,英文单词整个换行;