通过CSS可以对文字有很不错的处理效果。以下就简单的整理几种文字处理技巧。持续更新。
一、文字溢出:text-overflow
基本的式样如下:
1 .huanhang { 2 display: block; /*必须是块级元素*/ 3 white-space: nowrap; /*不换行*/ 4 text-overflow: ellipsis; /*用省略号代表溢出*/ 5 overflow: hidden; /*不允许出现滚动条*/ 6 width: 100px; /*必须要指定宽度,才能知道在哪截断文字*/ 7 8 }
当然兼容旧版Opera时不要忘记添加 前缀:
-o-text-overflow: ellipsis;
对于溢出的文字,我们也可以有其它的处理方案:
{ text-overflow: ellipsis; /*用省略号代表溢出*/ ; text-overflow: clip; /*截断溢出文字*/ text-overflow: string; /*指定某个字符串来替代溢出部分*/ }
二、文字分栏:column-count 、 column-gap 、 column-rule
我们经常能在报纸上看到那种分栏的排版,其实在CSS3中也提供了将文字多列显示的属性:
.duolie { -moz-column-count: 3; -webkit-column-count: 3; column-count: 3; -moz-column-gap: 30px; -webkit-column-gap: 30px; column-gap: 30px; -moz-column-rule: 1px dashed black; -webkit-column-rule: 1px dashed black; column-rule: 1px dashed black; }