图解CSS3核心技术与案例实践(第五章CSS3文本)

来源:互联网 发布:网络语吃草是什么意思 编辑:程序博客网 时间:2024/06/11 07:24

1.溢出文本属性text-overflow
①text-overflow:clip|ellipsis
clip:不显示省略标记(…),只是简单的裁切
ellipsis:文本溢出时显示省略标记,省略标记插入的位置是最后一个字符
②要实现文本溢出效果必须具备三个属性:
强制文本在一行显示(white-space:nowrap)
溢出内容隐藏(overflow:hidden)
文本容器宽度(width)
2.文本换行属性word-wrap
实现长单词与URL地址的自动换行
①word-wrap:normal|break-word
normal:默认值,浏览器只在半角空格或连字符的地方进行换行
break-word:将内容在边界内换行(不截断英文单词换行)
3.自动换行属性word-break
通过具体的属性设置,不仅可以让浏览器实现半角空格或者连字符后面的换行,而且可以让浏览器实现任意位置的换行
①word-break:normal | break-all | keep-all
narmal:默认值,中文到边界上的汉字换行,英文到整个单词换行
break-all:可以强行截断英文单词,达到词内换行效果
keep-all:不允许字断开,如果是中文,把前后标点符号内的一个汉字短语整个换行,英文单词整个换行;如果出现某个英文字符长度超出容器边界,后面的部分将撑破容器;如果边框为固定属性,则后边的部分无法显示
4.声明建立布局过程中如何处理元素的空白符white-space属性(没看)

5.文本换行技巧

原创粉丝点击