CSS实现text overflow:ellipsis的效果
适用于只有一行文字的情况.
.ellipsis{
text-overflow:ellipsis; /*当对象内文本溢出时显示省略标记(...)*/
width:200px; height:50px;
overflow:hidden;
white-space:nowrap;
}
text-overflow是CSS3的属性,IE6以上版本、Safari、chrome 支持。它可以带2个参数:
clip [不显示省略标记(...),而是简单的裁切];
ellipsis[当对象内文本溢出时显示省略标记(...)];
Firefox3出来了,仍然不支持text-overflow:ellipsis;
解决方法可以通过Firefox强大的XUL绑定实现如下:
-moz-binding: url('ellipsis.xml#ellipsis');
绑定的XML内容如下:
<?xml version="1.0" encoding="utf-8" ?>
<bindings xmlns="http://www.mozilla.org/xbl" xmlns:xbl="http://www.mozilla.org/xbl" xmlns:xul="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
<binding id="ellipsis">
<content>
<xul:description crop="end" xbl:inherits="value=xbl:text">
<children/>
</xul:description>
</content>
</binding>
</bindings>
xul:description的crop原来是那样强。。除了可以点点点掉后面的。。还可以点点点前面或者中间部分的。。这个功能可是非常实用哦,不知道W3C虾米时候也给这样的CSS属性让我们简单搞定一大堆问题呢。
然后还不小心发现。hedger悄悄的也实现一样的功能Hacking text-overflow for Firefox,不过还是感觉用XBL简洁方便。。
在很久很久以前,我也在研究,能不能调用firefox处理title的点点点的东东来完成效果,不过一直没实现。之前提出的-moz-text-overflow: ellipsis;via这种不靠谱的说法也不行,看来人家是铁了心。
相关文档:
css是什么?这是初学网页设计的同学们遇到的第一个问题,在学习网页制作之前,你一定要了解网页制作的大局,有了全局的了解,才知道怎么去学习。
网页设计分为:前台页面设计,后台程序设计。
前台页面设计分为:html,css,javasript,ps,flash(这几个都要了解哦,熟练掌握css)
后台程序设计分为:asp,php,asp.net(只要 ......
CSS,层叠样式表的作用是什么?我们先通过一个例子来体会一下:
看代码:
index.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv=" ......
样式选择符命名
选择符以类型分,同类放一起,类的定义顺序以HTML中实际的顺序为参考,以方便查找为主, 使用类似下面的规则:
[模块前缀 | 类型 | 作用]_[名称]_[状态 | 位置]
约定模块、类型、状态、位置等的所使用的单词或其缩写,保持上面的顺序,尽量保持在两到三个单词说清用途。
通用名词缩写
设置
set
......
看到问此问题的很多,所以花点时间整理下,欢迎大家提意见,做补充修改,谢谢!
/*lesliezmz整理的方法 2010-01-19*/
当writing-mode为tb-rl 时,文档流是从上到下,从右到左书写。然后设置text-align: center就可以实现垂直方向上的居中。算是一个小技巧吧。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transiti ......