在页面文本中,CSS3加入了几个新的文本功能,也是下面要讲解的三个new features:text-overflow 、word-wrap和word-break;
其实text-overflow不是css3退出的,在此之前text-overflow就常用于控制文本显示长度中,而css3中text-overflow新加一个ellipsis属性,text-overflow用于文本超出控制;来看一下clip和ellipsis的功效:
代码如下:
p.p1 { white-space: nowrap; width: 200px; border: 1px solid #000000; overflow: hidden; text-overflow: clip; } p.p2 { white-space: nowrap; width: 200px; border: 1px solid #000000; overflow: hidden; text-overflow: ellipsis; }
很简单,其中在ellipsis出现之前,很多实用js或者数据源截取的,容易造成标签缺失,又了这个属性后文本省略就容易多了;
CSS3 word-wrap提供了单个词汇换行的机制,在英文中,不带空格的连续英文会被认为是一个单词而不会被换行,例如:
而加上word-wrap:break-word后:
其实就是强制换行的意思;
CSS3 word-break提供了文本换行机制,定义每行文本到末尾的时候才换行,清除单个单词长度的因素,示例如下:
控制的css如下:
p.p1 { width: 140px; border: 1px solid #000000; Word-break: keep-all; } p.p2 { width: 140px; border: 1px solid #000000; Word-break: break-all; }