快速业务通道

CSS教程:CSS3新功能和新特性

作者 佚名技术 来源 CSS技术 浏览 发布时间 2012-02-25
一特性。具体参照:http://msdn.microsoft.com/workshop/author/dhtml/reference/properties/textoverflow.asp

Code:
text-overflow: ellipsis;
text-overflow: clip;
text-overflow: ellipsis-word;

 



Word-wrap
Word-wrap属性已经被微软发明并加入了CSS3中。它允许长单词在必要的情况下被截断换行。

 

Code:
word-wrap: normal;
word-wrap: break-word

 

 这个特性已经在IE、Safari、Firefox 3.1 (Alpha)中得以实现。


Box-sizing:盒模型为简单应用做了扩展
一直不完全理解盒模型?CSS3提供了一个叫做box-sizing的新的属性,这个属性让我们改变浏览器在计算元素宽度方面的特性。默认情况下,box-sizing的值是content-box。在这种情况下,计算宽高时会遵照CSS2.1的相关规则,再加入边框和内边距的宽高。如果把值设置为border-box,则你可以强制浏览器不按照规范中的宽高进行渲染,而是把边框和内边距直接算在盒模型内。
Firefox已经实现了这一特性,属性名为-moz-box-sizing。Safari使用-webkit-box-sizing属性名,Opera直接使用box-sizing属性名。


CSS3中的resize属性
总是希望元素可以由我们随意调整大小?使用过很多乱七八糟的技巧?CSS3在用户界面这部分提供了解决方案:resize属性。它允许你定义盒模型是否可以调整大小。Webkit最新的深夜版本实现这一特性。

 

Code:
div.resize { width: 100px; height: 100px; border: 1px solid; resize: both; overflow: auto; }

 

 其中resize: both表示其宽度和高度都可以调整。同时还有resize: horizontal;和 resize: vertical;允许只调整宽度或只调整高度。还可以搭配max-width/min-width/m

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

分享到: 更多

Copyright ©1999-2011 厦门凌众科技有限公司 厦门优通互联科技开发有限公司 All rights reserved

地址(ADD):厦门软件园二期望海路63号701E(东南融通旁) 邮编(ZIP):361008

电话:0592-5908028 传真:0592-5908039 咨询信箱:web@lingzhong.cn 咨询OICQ:173723134

《中华人民共和国增值电信业务经营许可证》闽B2-20100024  ICP备案:闽ICP备05037997号