做网站UI的时候经常会遇到一个文章标题的长度超出了设计的宽度。CSS2时代的解决方案往往是通过服务端限制标题长度或通过overflow: hidden来生硬的隐藏多出的文本。CSS3时代的到来给我们了更加简单方便的解决方案。

text-overflow: ellipsis; //实现文本溢出隐藏并在结尾附加"..."
white-space: nowrap; //实现禁止文本自动换行

效果图：(Chrome浏览器新标签页的界面中就运用到上面代码中的css属性)

这样一来上面提到的问题就能很轻松的解决了！
目前浏览器对CSS3的支持还很有限。所以上面的方法只使用性有限。
期待CSS3时代的全面到来吧~

Tags: CSS3, text-overflow, UI

This entry was posted on 01/17/2010 at 14:39 and is filed under DSS·Share. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.