CSS3属性之五：text-overflow_H5之家 - 中国HTML5教程资源分享第一站

语法：

text-overflow ： clip | ellipsis

取值：

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

说明：

设置或检索是否使用一个省略标记（...）标示对象内文本的溢出。对应的脚本特性为textOverflow。
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）：

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

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

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