CSS的未来:鲜为人知的CSS 2.1和CSS3属性

W3C这样描述：”由于上个例子中由’quotes’定义的引号方便的定位在电脑键盘上，高质量的字符则需要不同的10646字符集。”

你或许听说过但是没有记住的CSS3属性

接近尾声，让我们重温一些不太流行的以及不像border-radius和box-shadow那样被广泛需求的CSS3属性。

text-overflow

或许你会常常遇到这个问题：某个容器对于其内的文字来说太小了，然后你不得不用javascript来截断字符串并添加”…”符号以避免文字溢出。

忘掉它吧！采用CSS3和text-overflow: ellipsis，如果文字比它的容器的宽度要长的话，你就可以强制文字以”…”结束它。唯一的要求是设置overflow:hidden。不幸的是，Firefox不支持这个属性，但是貌似在最近的版本中将会提供支持。

示例

1
2
3
4

div {
width: 100px;
text-overflow: ellipsis;
}

浏览器支持: CSS 3，所有浏览器的最新版本，除了Firefox，IE从IE6开始支持，据说Firefox到6.0也会提供支持的——希望如此吧。

扩展阅读: W3C

word-wrap

当文字在一个比较窄的容器中时，它的某个部分可能会因为太长而不能正确的换行。比如链接就常常引起问题。如果你不想用overflow: hidden隐藏溢出的文字，那么你就可以设置 word-wrap 为break-word，它可以让字符串在到达容器的宽度限制时换行。

示例

1
2
3
4

div {
width: 50px;
word-wrap: break-word;
}

浏览器支持: CSS 3，所有现代浏览器。

扩展阅读: W3C

resize

如果你在使用Firefox或Chrome，那么你肯定注意到了文本框的右下角默认有个小的手柄，它可以让你调整它们的大小。这个标准的行为由CSS3 属性 resize: both实现。

但是它并不仅限于textarea。它可以用于所有的HTML元素。horizontal 和 vertical 值用于控制调整水平方向还是垂直方向。

请注意：对于display:block元素，如果设置了overflow:visible，resize属性将会无效(这一点原文描述不详——by 神飞)。

浏览器支持: CSS3, 除了Opera和IE以为的其它最新的浏览器。

扩展阅读:

凌众科技专业提供服务器租用、服务器托管、企业邮局、虚拟主机等服务，公司网站：http://www.lingzhong.cn 为了给广大客户了解更多的技术信息，本技术文章收集来源于网络,凌众科技尊重文章作者的版权，如果有涉及你的版权有必要删除你的文章，请和我们联系。以上信息与文章正文是不可分割的一部分,如果您要转载本文章,请保留以上信息，谢谢!