CSS3的文本特性

标签：需要   裁切   fir   才有   html   psi   宽度   说明   normal   

1. CSS3 溢出文本
   CSS3溢出文本属性平时在网页制作中一定碰到过内容溢出的问题， 如文章列表标题很长， 而其宽度又受到限制， 此时超出宽度的内容就会以省略 标记（…） 显示。 以前实现这样的效果都是由后台程序截取一定的字符数在前台输出，另外一种方法就是使用JavaScript截取一定的字符数实现。可是这两种方法都有其 不足之处，如中文和英文的计算字符宽度的问题，这个值不好计算，所以造成截取字符数不好控制，从而其通用性也差。 CSS3新增了text-overflow 属性， 使得 这个问题迎刃而解。
   text-overflow 属性参数比较简单， 只有两个属性值。
   -clip： 不显示省略标记（…）， 只是简单的裁切。
   -ellipsis： 文本溢出时显示省略标记（…），省略标记插入的位置是最后一个字符。
   强制文本在一行显示（ white- space: nowrap）和溢出内容隐藏（overflow: hidden），并且需要定义容器的宽度。
   text-overflow: ellipsis; overflow: hidden; 有省略号，需要这两个属性配合才有效，
   text-overflow: clip; overflow: hidden; 直接隐藏，需要这两个属性配合才有效，
2. CSS3 文本换行
   http:/ /www.iis7.com/b/wzjk/
   在CSS3中，使用word-wrap：break-word属性实现长单词与URL地址的自动换行。
   -break-all：可以强行截断英文单词， 达到词内换行效果。
   -keep-all：不允许字断开。如果是中文把前后标点符号内的一个汉字短语整个换行，英文单词整个换行；如果出现某个英文字符长度超过容器边界，后面的部分将撑破容器； 如果边框为固定属性， 则后面部分无法显示。
   white-space 属性主要用来声明建立布局过程中如何处理元素中的空白符。
   white-space 属性取值简单说明如下：
   -normal： 默认值。 空白处会被浏览器忽略。 可以通过这个值恢复到属性的默认值。
   -pre： 文本空白处会被浏览器扣留，其行为方式类似于HTML中的<pre>标签效果。
   -nowrap： 文本不会换行，文本会在同一行上，直到碰到换行标签<br/>为止。
   -pre- line： 合并空白符序列，但保留换行符，此属性不支持 IE 7. 0-、 Firefox 3. 0- 和 Opera 9. 2- 以下版本浏览器。
   -pre- wrap： 保留空白符序列， 但是正常进行换行， 此属性值不支持 IE 7. 0 和 Firefox 3. 0 以下 版本浏览器。
   -inherit： 继承父元素的white-space 属性值， 此属性值在所有的 IE浏览器都不支持。

CSS3的文本特性

标签：需要   裁切   fir   才有   html   psi   宽度   说明   normal   

原文地址：http://blog.51cto.com/13941970/2293820