关于text-overflow(一种省略文字的方式)

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

文章说必须要设置三个属性

text-overflow:ellipsis;

white-space:nowrap;

overflow:hidden

我测试的情况是

代码如下：’Label’不能正常显示

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd%22>
<html xmlns="http://www.w3.org/1999/xhtml%22>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
.div_24td{border:0px hidden;line-height:25px;width:230px;text-overflow:ellipsis; white-space:nowrap; overflow:hidden;}
li {width:300px; line-height:25px; text-overflow:ellipsis; white-space:nowrap; overflow:hidden;}
</style>
</head>

<body>
<li><a href="http://www.52css.com/%22>CSS实战精萃 - Pro CSS Techniquesadsfasdfasdf</a></li>
<Label class=div_24td title="你打算放阿斯蒂芬倒萨发生的发生地方大师傅俺的沙发安德森发生地方俺的沙发阿斯蒂芬大师傅阿斯顿">
你打算放阿斯蒂芬倒萨发生的发生地方大师傅俺的沙发安德森发生地方俺的沙发阿斯蒂芬大师傅阿斯顿
</Label>
</body>
</html>

posted on 2009-03-02 16:52  fredli2005  阅读(564)  评论(0)  编辑  收藏  举报

导航