CSS3属性之五:text-overflow

语法:

text-overflowclip | ellipsis

取值:

clip:
不显示省略标记(...),而是简单的裁切。
ellipsis:
当对象内文本溢出时显示省略标记(...)

说明:

  1. 设置或检索是否使用一个省略标记(...)标示对象内文本的溢出。对应的脚本特性为textOverflow。
  2. text-overflow属性仅是注解,当文本溢出时是否显示省略标记。并不具备其它的样式属性定义。要实现溢出时产生省略号的效果还须定义:强制文本在一行内显示(white-space:nowrap)及溢出内容为隐藏(overflow:hidden),只有这样才能实现溢出文本显示省略号的效果。  

兼容性:

text-overflow : clip 

text-overflow : ellipsis 

从上面的表中我们可以看出,Firefox对text-overflow:ellipsis 这一属性支持不是很好。目前我还不知道用什么方法能解决这个问题。请高手们不吝赐教。

下面看个实例:

<!DOCTYPE html>
<html>
<head>
<title>text-overflow demo</title>
<meta charset=utf-8" />
<style>
.test_demo_clip
{
text-overflow
:clip;
overflow
:hidden;
white-space
:nowrap;
width
:200px;
background
:#ccc;
}
.test_demo_ellipsis
{
text-overflow
:ellipsis;
overflow
:hidden;
white-space
:nowrap;
width
:200px;
background
:#ccc;
}
</style>
</head>
<body>
<h2>text-overflow : clip </h2>
<div class="test_demo_clip">
不显示省略标记,而是简单的裁切条
</div>
<h2>text-overflow : ellipsis </h2>
<div class="test_demo_ellipsis">
当对象内文本溢出时显示省略标记
</div>
</body>
</html>

运行效果(Chrome):

下面来看一个高级应用:

<!DOCTYPE html>
<html>
<head>
<title>text-overflow</title>
<meta charset="utf-8" />
<style>
.box
{
text-overflow
:ellipsis;
-o-text-overflow
:ellipsis;
overflow
:hidden;
white-space
:nowrap;
border
:1px solid #000;
width
:400px;
padding
:20px;
color
:rgba(0, 0, 0, .7);
cursor
:pointer;
}

.box:hover
{
white-space
:normal;
color
:rgba(0, 0, 0, 1);
background
:#e3e3e3;
border
:1px solid #666;
}
</style>
</head>
<body>
<div class="box">
元和十年,予左迁九江郡司马。明年秋,送客湓浦口。闻舟中夜弹琵琶者,
听其音,铮铮然有京都声。问其人,本长安倡女。尝学琵琶于穆、曹二善才,
年长色衰,委身为贾人妇。遂命酒使快弹数曲,曲罢悯然。自叙少小时欢乐事,
今漂沦憔悴,转徙于江湖间。予出官二年,恬然自安,感斯人言,是夕始觉有迁谪意。
因为长句,歌以赠之,凡六百一十二言,命曰《琵琶行》。

浔阳江头夜送客,枫叶荻花秋瑟瑟。主人下马客在船,举酒欲饮无管弦。
醉不成欢惨将别,别时茫茫江浸月。忽闻水上琵琶声,主人忘归客不发。
寻声暗问弹者谁,琵琶声停欲语迟。移船相近邀相见,添酒回灯重开宴。
千呼万唤始出来,犹抱琵琶半遮面。转轴拨弦三两声,未成曲调先有情。
弦弦掩抑声声思,似诉平生不得意。低眉信手续续弹,说尽心中无限事。
轻拢慢捻抹复挑,初为霓裳后六幺。大弦嘈嘈如急雨,小弦切切如私语。
嘈嘈切切错杂弹,大珠小珠落玉盘。间关莺语花底滑,幽咽泉流冰下难。
冰泉冷涩弦疑绝,疑绝不通声暂歇。别有幽愁暗恨生,此时无声胜有声。
银瓶乍破水浆迸,铁骑突出刀枪鸣。曲终收拨当心画,四弦一声如裂帛。
东舟西舫悄无言,唯见江心秋月白。
沉吟放拨插弦中,整顿衣裳起敛容。自言本是京城女,家在虾蟆陵下住。
十三学得琵琶成,名属教坊第一部。曲罢曾教善才伏,妆成每被秋娘妒。
五陵年少争缠头,一曲红绡不知数。钿头云篦击节碎,血色罗裙翻酒污。
今年欢笑复明年,秋月春风等闲度。弟走从军阿姨死,暮去朝来颜色故。
门前冷落鞍马稀,老大嫁作商人妇。商人重利轻别离,前月浮梁买茶去。
去来江口守空船,绕船月明江水寒。夜深忽梦少年事,梦啼妆泪红阑干。
我闻琵琶已叹息,又闻此语重唧唧。同是天涯沦落人,相逢何必曾相识。
我从去年辞帝京,谪居卧病浔阳城。浔阳地僻无音乐,终岁不闻丝竹声。
住近湓江地低湿,黄芦苦竹绕宅生。其间旦暮闻何物,杜鹃啼血猿哀鸣。
春江花朝秋月夜,往往取酒还独倾。岂无山歌与村笛,呕哑嘲咋难为听。
今夜闻君琵琶语,如听仙乐耳暂明。莫辞更坐弹一曲,为君翻作琵琶行。
感我此言良久立,却坐促弦弦转急。凄凄不似向前声,满座重闻皆掩泣。
座中泣下谁最多?江州司马青衫湿。
</div>
</body>
</html>

运行效果(Chrome):

默认状态下只显示文章的第一句话:

鼠标移动到文字上显示全篇文章内容:

还可以指定自己的字符串,应使用省略号的位置。这样做来修饰要显示的文本字符串。

posted @ 2011-03-24 12:53  疯狂的代码  阅读(12763)  评论(2编辑  收藏  举报