Leeiio Chaos Made.(X)HTML/CSS/XML/XSL

溢出文本显示省略号,关于text-overflow:ellipsis的那些事

Leeiio — Sun, 18 Jul 2010 06:49:26 +0000

这个标题其实已经是一个老生常谈的问题了。很多时候，比如网站最基本的文章列表，标题会很长，而显示列表的区域宽度却没有这么宽，这时候最正常的做法就是让超出宽度的部分文字用省略号(…)来表示。通常做法是网站后台程序截取一定的字符然后输出到前台显示或者前台用javascript截取一定的字符，但是通过控制字数来截取的话还是存在一个大问题的，因为中文和英文的字符宽度问题，这个字数不好控制，而且通用性较差。那么有没有更好的方法呢，比如直接用CSS来解决的，当然是有的。

text-overflow是一个比较特殊的属性，W3C早前的文档中（目前的文档中没有包含text-overflow属性，FML!）对其的定义是:

Name: text-overflow-mode
Value: clip | ellipsis | ellipsis-word

clip : 　不显示省略标记（…），而是简单的裁切
ellipsis : 　当对象内文本溢出时显示省略标记（…），省略标记插入的位置是最后一个字符。
ellipsis-word : 　当对象内文本溢出时显示省略标记（…），省略标记插入的位置是最后一个词（word）。

至于为什么一开始我说text-overflow是一个比较特殊的样式呢？因为我们可以用它代替我们通常所用的标题截取函数，而且这样做对搜索引擎更加友好，如：标题文件有50个汉字，而我们的列表可能只有300px的宽度。如果用标题截取函数，则标题不是完整的，如果我们用CSS样式text-overflow:ellipsis，输出的标题是完整的，只是受容器大小的局限不显示出来罢了（表现上是超出部分显示省略标记…）。

text-overflow: ellipsis属性仅是注解，当文本溢出时是否显示省略标记。并不具备其它的样式属性定义。我们想要实现溢出时产生省略号的效果。还必须定义：强制文本在一行内显示（white-space:nowrap）及溢出内容为隐藏（overflow:hidden）。只有这样才能实现溢出文本显示省略号的效果。Via.

那么，如果我们要给p标签定义text-overflow:ellipsis就可以这么写：

p {
      white-space: nowrap;
      width: 100%;                  /* IE6 需要定义宽度 */
      overflow: hidden;             
 
      -o-text-overflow: ellipsis;    /* Opera */
      text-overflow:    ellipsis;    /* IE, Safari (WebKit) */
   }

使用样式前：

我是一段测试文字，请分别用IE，Safari，chrome，opera浏览器查看我哦！

使用样式后：

我是一段加长过的测试文字，请分别用IE，Safari，chrome，opera浏览器查看我哦！哈哈哈，看到省略号了么？

浏览器兼容状况

Browser	Lowest Version	Support of
Internet Explorer	6.0	text-overflow
Firefox (Gecko)	—	—
Opera	9.0	-o-text-overflow
Safari (WebKit)	1.3 (312.3)	text-overflow

OH,FML!Firefox不支持这个属性！这回，Firefox你也太另类了吧！还有别的办法么，当然有，方法还挺多的。
比如Mozilla developer center推荐的-moz-binding CSS属性。Mozilla developer center给出的理由是text-overflow没有W3C的规范…但是因为Firefox支持XUL，一种XML的用户界面语言。并且Firefox还支持XBL，一种XML绑定语言，这样我们就可以使用Mozilla developer center推荐的-moz-binding CSS属性来绑定XUL里的ellipsis属性了。

1.XUL方式

首先，我们创建XUL，它应该被保存为ellipsis.xml：

 version="1.0"?>  
   
  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"  
>  
     id="ellipsis">  
        >  
            >  
                 crop="end" xbl:inherits="value=xbl:text">/>>  
            >  
        >  
    >  
>

然后我们需要把这个xml文件放到一个目录，原来的css需要加一条，变成这样

p {
      white-space: nowrap;
      width: 100%;                  /* IE6 需要定义宽度 */
      overflow: hidden;             
 
      -o-text-overflow: ellipsis;    /* Opera */
      text-overflow:    ellipsis;    /* IE, Safari (WebKit) */
      -moz-binding: url('ellipsis.xml#ellipsis');    /* Firefox */
   }

虽然Firefox通过XUL的方式实现了ellipsis，但是还是需要注意以下这些问题：
1.经过XUL处理过的文本你将不能被选中，按理说-moz-user-select: text; 属性将允许文本被选中，但是我没有试验成功。
2.如果你给父元素绑定了XUL，那么子元素的内容将变得不可见。例如：

It is a longhaha long long long long text!

如果你只是给p节点绑定了XUL，那么在Firefox下你将看不到haha这个内容。
它的源代码实际上是：

<p>It is a long<em> hahaem> long long long long text!p>

参考资料:

http://www.w3.org/TR/2003/CR-css3-text-20030514/

http://www.quirksmode.org/css/contents.html

https://bugzilla.mozilla.org/show_bug.cgi?id=312156

https://developer.mozilla.org/En/XUL

https://developer.mozilla.org/En/XUL/Description

http://www.rikkertkoppes.com/thoughts/2008/6/

http://www.w3.org/TR/xbl/

http://www.w3.org/TR/css3-text/

2.Javascript方式

既然XUL无法完美解决Firefox下文字溢出显示…，那么我们就求助javascript吧，当然，并不是古老的截取一定数目的字符来实现。
这里以jQuery为例，代码如下：

(function($) {
	$.fn.ellipsis = function(enableUpdating){
		var s = document.documentElement.style;
		if (!('textOverflow' in s || 'OTextOverflow' in s)) {
			return this.each(function(){
				var el = $(this);
				if(el.css("overflow") == "hidden"){
					var originalText = el.html();
					var w = el.width();
 
					var t = $(this.cloneNode(true)).hide().css({
                        'position': 'absolute',
                        'width': 'auto',
                        'overflow': 'visible',
                        'max-width': 'inherit'
                    });
					el.after(t);
 
					var text = originalText;
					while(text.length > 0 && t.width() > el.width()){
						text = text.substr(0, text.length - 1);
						t.html(text + "...");
					}
					el.html(t.html());
 
					t.remove();
 
					if(enableUpdating == true){
						var oldW = el.width();
						setInterval(function(){
							if(el.width() != oldW){
								oldW = el.width();
								el.html(originalText);
								el.ellipsis();
							}
						}, 200);
					}
				}
			});
		} else return this;
	};
})(jQuery);

这段js的原理很简单，就是通过不断的比较宽度值，然后逐个缩短字符宽度，当最后宽度合适的时候，停止循环，就实现了文字溢出显示…的效果。
这段js还需要一段css来配合。

.overflow {
	text-overflow: ellipsis;
	-o-text-overflow: ellipsis;
	white-space: nowrap;
	overflow: hidden;
}

js里有个判断就是当样式里出现text-overflow或者-o-text-overflow的时候，便不会执行这段js。因为支持这两个属性的浏览器可以自己实现ellipsis效果。

这两种方法都可以实现Firefox下ellipsis的效果，如何取舍使用，具体还得根据你要运用到的项目的具体情况来具体分析，XUL实现的方法的不足之处在以上已经很详尽地列举了，如果你可以避免或者说这些无关你项目的大问题，那么XUL不失一个好方法。

至于其他的一些方法你可能在网上也有看到，比如用:after伪类来实现等，个人不推荐，所以我这里也不细说了，如果你有更好的方法，也希望能与我分享，谢谢观看！

本文地址:http://leeiio.me/text-overflow-ellipsis/

截至您的阅读器抓取时已有评论 54 条,大家讨论的如此激烈,你为什么不过去瞧瞧?!

©Copyright 2007-2009 Leeiio Chaos Made http://Leeiio.me
本站更換RSS地址：http://feed.leeiio.me，麻煩大家更新下，謝謝！

声明: 本站遵循署名-非商业性使用-相同方式共享 3.0 共享协议. 转载请注明转自 Leeiio.me

年度曖昧文章

2010 年 CSS 裸奔节！

Leeiio — Fri, 09 Apr 2010 02:06:12 +0000

由Dustin Diaz推动的CSS NAKED DAY今年没有按时举行，在其网站上也没有贴出任何的今年的时间，但是推动Web标准发展应该是每位业界人士的一份责任，因此世界各地的人都延续传统，和去年一样是4月9日，大家都纷纷脱去了自己网站的衣服(CSS)，裸奔。

具体细节大家可以查看我去年的文章《拥抱 CSS 裸奔节，用 JavaScript 强制脱衣》。当然方法有很多，你想怎么裸就怎么裸。

祝大家裸奔愉快！羞。

本文地址:http://leeiio.me/2010-css-naked-day/

截至您的阅读器抓取时已有评论 18 条,欢迎您也过来留下您的意见 !

©Copyright 2007-2009 Leeiio Chaos Made http://Leeiio.me
本站更換RSS地址：http://feed.leeiio.me，麻煩大家更新下，謝謝！

声明: 本站遵循署名-非商业性使用-相同方式共享 3.0 共享协议. 转载请注明转自 Leeiio.me

拥抱 CSS 裸奔节，用 JavaScript 强制脱衣 (26)

消失的CSS3 box-shadow 属性?

Leeiio — Sun, 04 Apr 2010 06:26:17 +0000

如果你在疑惑为什么标题后面是个问号，因为我也不确定具体这个box-shadow属性是否消失后就不再回来了。发生了什么事？其实就是最近在看W3C关于css3的20091217文档的时候发现box-shadow属性已经没有任何说明了，只留下这么一段话：

This module previously defined a ‘box-shadow’ property. This feature has been removed from this module for further discussion, and should reappear in another CSS module (or a later version of this module) in the near future.
以前这个模块定义了一个‘box-shadow’属性。这个特性目前已从这个模块中移除以做进一步的讨论，并将会出现在别的 CSS 模块中(或者更高版本的此模块)在不久的将来。

你知道，在css3中box-shadow是一个非常好玩的属性，被用得最广泛的地方莫过于:focus后的input或者textarea，诸如本站的input和留言区域的textarea，你会发现在:focus的状态时是加了box-shadow属性的。如图：
未激活状态的textarea

激活状态的textarea

当然在没看W3C的文档之前，我在别人的blog里看到的对于box-shadow的介绍发现内容都十分的陈旧了，大部分的对于shadow的定义都只是inset || [ ? || ]而实际上其实是inset || [ ? ? || ]。也就是有四个length可以定义。

在box-shadow没被移除前的最近一个CSS3草案文档(http://www.w3.org/TR/2008/WD-css3-background-20080910/#the-box-shadow)中是这样定义的：

none | [ ]*

这里被定义为：

= inset? && [ {2,4} && ? ]

前面两个length长度取值对应着阴影在水平和竖直方向的位移。第三个length长度取值是模糊半径。第四个length长度取值是传播半径，使用正数表示阴影扩大，使用负数表示影子缩小，而这个长度是相对于父元素的大小而言的。
而inset就是把原本投射在box外部的阴影投射到box里面而实现的内阴影，用过一些作图软件的对于内阴影应该不陌生吧。

box-shadow属性在不支持的浏览器上会优雅的降级。例如，在微软IE8以下浏览器上看起来都是平淡无奇的盒子而没有任何阴影效果。

当然前文介绍的《两个 CSS3样式可视化生成工具：CSS3 Please & CSS3 Generator》可以帮你更直观的理解box-shadow这个属性。

如果你希望更多的了解这个目前已经被W3C移除的属性，可以继续阅读以下列表的文章：

不知道何时，W3C才会发布正式版的CSS3啊…

View Demo CSS3 box-shadow Demo

本文地址:http://leeiio.me/css3-box-shadow-removed/

截至您的阅读器抓取时已有评论 12 条,欢迎您也过来留下您的意见 !

©Copyright 2007-2009 Leeiio Chaos Made http://Leeiio.me
本站更換RSS地址：http://feed.leeiio.me，麻煩大家更新下，謝謝！

声明: 本站遵循署名-非商业性使用-相同方式共享 3.0 共享协议. 转载请注明转自 Leeiio.me

CSS 3.0 中文参考手册(CHM版)

Leeiio — Fri, 28 Aug 2009 13:47:42 +0000

CSS 是 Cascading Style Sheet 的缩写。译作「层叠样式表」。是用于(增强)控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。

对于CSS 3.0，它对于我们Web设计人员来说不只是新奇的技术，更重要的是这些全新概念的Web应用给我们的设计开发提高了效率以及更多的无限可能性，我们将不必再依赖图片或者 Javascript 去完成圆角、块/文字阴影、渐变、透明度等提高Web设计质量的特色应用。

该手册由 Tencent 的 ISD Webteam 团队制作，因为 CSS3 还是草案，中文资料少之又少，基本上都是一篇内容转来转去，而该手册从基础语法到示例制作，都是根据 W3C 工作草案进行翻译，并结合 ISD Webteam 的沉淀制作示例。

备受期待的 CSS 3 新功能

圆角、多背景、@font-face 用户自定义字体、动画与渐变、渐变色、盒阴影、RGBa – 加入透明色、文字阴影等等
CSS3 的出现，让代码更简洁、页面结构更合理，性能和效果得到兼顾。

CSS 3.0 参考手册 (中文版) 预览：

下载：

CSS 3.0 中文参考手册(CHM版) 版本号：beta1 (最后更新时间：2009-8-22)

CSS 3.0 中文参考手册(CHM版)下载366.61 KB 目前共有1795次下载

本文地址:http://leeiio.me/css-3-manual-zh-cn/

截至您的阅读器抓取时已有评论 21 条,欢迎您也过来留下您的意见 !

声明: 本站遵循署名-非商业性使用-相同方式共享 3.0 共享协议. 转载请注明转自 Leeiio.me

浏览器专属 CSS Hack:区分 Firefox / Opera / Safari / Internet Explorer

Leeiio — Sun, 03 May 2009 16:36:33 +0000

CSS Hack 是在标准 CSS 没办法兼容各浏览器显示效果时才会用上的补救方法,在各浏览器厂商解析 CSS 没有达成一致前,我们只能用这样的方法来完成这样的任务。网上你可能能搜索到一大堆的 CSS Hack，但是我今天发布的你可能并不都很了解，因为这些都是只针对单独一个浏览器的 CSS Hack。

为了向你展示这些 CSS Hack 是否正常运作，我新建六个 P 标签，并给每一个 P 标签一个特有的 id。这将向你展示 CSS Hack 的运作情况。

<p id="opera">我来自 Opera 7.2 - 9.5</p>
<p id="safari">我是神奇的 Safari</p>
<p id="firefox">我来自 Firefox</p>
<p id="firefox12">我是你爷爷 Firefox 1 - 2 </p>
<p id="ie7">我是囧 IE 7</p>
<p id="ie6">我是脑瘸 IE 6</p>

然后我让这些 P 标签默认都不显示

 包裹方式，最后一种就是直接且暴力的 style=”" 方式，通过 Javascript 代码，强制禁用 type=”text/css” 的 link 或者 让 link 链接 css 的 href=”" 为空，且让 

被清除或者禁用，且让 style=”" 为空 或者去除。
这里提供两种方法，一种是最普通的 Javascript 来实现，另外一种是通过目前的最流行的 Javascript 库 jQuery 来实现。
第一种（普通版）：

<script type="text/JavaScript">	
// 用style方式引用的css
var style=document.getElementsByTagName('style');
var s='Style:' + style.length;
for (i=0; i<style.length; i++)
{
    /*s += style.item(i) + '|';*/
    style.item(i).disabled=true;
}
 
// 用link方式引用的css
var link = document.getElementsByTagName('link');
s += 'Link:' + link.length;
for (i=0; i<link.length; i++)
    if ('text/css' == link.item(i).type)
        {
            /*s += link.item(i).href + "|\\n";*/
            link.item(i).disabled=true;
        }
 
// 任意对象的style=""
var obj = document.getElementsByTagName('body').item(0).childNodes;
var obj = document.getElementsByTagName('*');
s += 'Obj:' + obj.length;
for (i=0; i<obj.length; i++)
{   
    obj1 = obj.item(i);
    if (obj1.attributes.getNamedItem('style'))
    {
        s += obj1.nodeName + obj1.attributes.getNamedItem('style').value + "\\n";
        obj1.attributes.getNamedItem('style').value = "";
    }
}
script>

只需将以上这段 JS 代码插入你的网页中即可。
接着是第二种（jQuery版）

<script type="text/JavaScript">		
$(document).ready(function(){
	// 用link方式引用的css
	$("link").attr("type", function() { 
		if ($(this).attr("type") == "text/css")
			$(this).attr("href","");
	}); 
 
	// 任意对象的style=""
		$("*").removeAttr("style");
 
	// 用style方式引用的css
	$("style").remove();
});
script>

如果你的网站启用了 jQuery 库的话，那么毫不犹豫地用第二种吧，你看代码是何其简洁啊！
最后祝大家裸奔愉快！

本文地址:http://leeiio.me/force-remove-css-in-css-nake-day/
截至您的阅读器抓取时已有评论 26 条,欢迎您也过来留下您的意见 !
©Copyright 2007-2009 Leeiio Chaos Made http://Leeiio.me
本站更換RSS地址：http://feed.leeiio.me，麻煩大家更新下，謝謝！

声明: 本站遵循 署名-非商业性使用-相同方式共享 3.0 共享协议. 转载请注明转自 Leeiio.me
 2010 年 CSS 裸奔节 ！ (18)

CSS 改变选取文字的颜色(CSS3 – 目前 Firefox/Safari only)

Leeiio — Sun, 05 Apr 2009 06:06:53 +0000

无疑在这个技术迅猛发展的现在，css2 已经显得何其单薄，css3 草案出来后，无疑将为 web 设计带来更多新奇的效果。选取文字颜色的改变就是 css3 中的一项规范。虽然出来得比较早了，但是鉴于还有很多人不知晓，所以我写出来分享给大家。

语法:
::selection {background: #ffb7b7; /* Safari */} ::-moz-selection {background: #ffb7b7; /* Firefox */}

考虑到未来的浏览器可能会支援此属性，所以你也可以再加上这么一条
selection {background: #ffb7b7; }

Example:
p.red::selection { background: #ffb7b7; } p.red::-moz-selection { background: #ffb7b7; }

这个 css3 规范还可以这样玩(将图片隐藏在 html 中): Text + Image + CSS3 = Crazy Delicious (此网站和上述语法在 IE 中无法显示效果)

View Demo Highlight Colors

以上范例转载自: Tsung’s Blog and Overriding The Default Text Selection Color With CSS.

本文地址:http://leeiio.me/css-modify-selection-color-css3/

截至您的阅读器抓取时已有评论 14 条,欢迎您也过来留下您的意见 !

声明: 本站遵循署名-非商业性使用-相同方式共享 3.0 共享协议. 转载请注明转自 Leeiio.me

一张图片实现的 css 圆角滑动门导航菜单

Leeiio — Fri, 03 Apr 2009 13:45:13 +0000

css 滑动门样式我想应该是个陈谷子烂芝麻的问题了，我之前一直使用的两张图片的方式进行处理的，后来偷懒，用一些浏览器的私有属性进行的直接圆角的方式，前者需要切图比较麻烦，后者通不过 W3C 验证。思索了一下，找到了一个只用一张图片实现的 css 圆角滑动门的方法。仅供存档以及学习笔记，高手可以绕行了，感兴趣的请继续阅读下去。

因为 IE6 不支持 a 之外的 Hover 伪类，所以我们需要插入一个空标签来解决 IE6 下的 Hover 问题。请先看下面这段html

<ul class="nav">
    <li><a href="#" title="标题" class="current"><span></span>标题</a></li>
    <li><a href="#" title="还是标题"><span></span>还是标题</a></li>
    <li><a href="#" title="我是中文标题"><span></span>我是中文标题</a></li>
    <li><a href="#" title="人家是个女标题"><span></span>人家是个女标题</a></li>
    <li><a href="#" title="人家是个苗条的美女标题"><span></span>人家是个苗条的美女标题</a></li>
</ul>

注意看，就是在 a 标签里面插入了一个 span 标签。

然后是 css 部分,因为是滑动门，所以是自适应宽度，任何一个标签都不要定义宽度

Leeiio Chaos Made.(X)HTML/CSS/XML/XSL

溢出文本显示省略号,关于text-overflow:ellipsis的那些事

1.XUL方式

2.Javascript方式

2010 年 CSS 裸奔节 ！

消失的CSS3 box-shadow 属性?

CSS 3.0 中文参考手册(CHM版)

备受期待的 CSS 3 新功能

CSS 3.0 参考手册 (中文版) 预览：

下载：

浏览器专属 CSS Hack:区分 Firefox / Opera / Safari / Internet Explorer

CSS 改变选取文字的颜色(CSS3 – 目前 Firefox/Safari only)

一张图片实现的 css 圆角滑动门导航菜单

2010 年 CSS 裸奔节！