CSS3属性:text-overflow

2593

语法:

text-overflow : clip | ellipsis

取值:

  • clip:

  • 不显示省略标记(...),而是简单的裁切。

  • ellipsis:

  • 当对象内文本溢出时显示省略标记(...)

说明:

  1. 设置或检索是否使用一个省略标记(...)标示对象内文本的溢出。对应的脚本特性为textOverflow。

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

下面看个实例:

 

<!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):

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

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

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