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

文本省略:

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

使用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:不允许字断开,中文把前后标点符号内的一个汉字短语整个换行,英文单词整个换行;

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容