首页 > 代码库 > 当文字过长时裁剪（显示省略号或只裁剪 用CSS方法，不用程序）
当文字过长时裁剪（显示省略号或只裁剪 用CSS方法，不用程序）
原文发布时间为：2009-09-16 —— 来源于本人的百度文章 [由搬家工具导入]
CSS中ellipsis()应用【转】
CSS手册中text-overflow属性的定义：
语法：
text-overflow : clip | ellipsis
参数：
clip : 不显示省略标记（...），而是简单的裁切
（clip这个参数是不常用的！）
ellipsis : 当对象内文本溢出时显示省略标记（...）
说明：
设置或检索是否使用一个省略标记（...）标示对象内文本的溢出。
请您注意，text-overflow:ellipsis属性在FF中是没有效果的。
示例：
div { text-overflow : clip; }
text-overflow是一个比较特殊的样式，我们可以用它代替我们通常所用的标题截取函数，而且这样做对 搜索引擎更加友好，如：标题文件有50个汉字，而我们的列表可能只有300px的宽度。如果用标题截取函数，则标题不是完整的，如果我们用CSS样式 text-overflow:ellipsis，输出的标题是完整的，只是受容器大小的局限不显示出来罢了。
关于text-overflow属性如何应用，我们作如下的说明讲解：
text-overflow属性仅是注解，当文本溢出时是否显示省略标记。并不具备其它的样式属性定义。我们想 要实现溢出时产生省略号的效果。还必须定义：强制文本在一行内显示（white-space:nowrap）及溢出内容为隐藏（overflow: hidden）。只有这样才能实现溢出文本显示省略号的效果。
我们首页建立了一个无序列表UL，里面有几个列表项LI，内部建立了列表链接A。我们的测试主要在LI在进行，请注意观察，看如下的三段代码：
一、仅定义text-overflow:ellipsis; 不能实现省略号效果。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>it55</title>
<style type="text/css">
ul {width:300px; margin:50px auto;}
li {width:300px; line-height:25px; text-overflow:ellipsis;}
a {color:#03c; font-size:13px;}
a:hover {color:#000;}
</style>
</head>
<body>
<ul>
<li><a href=http://www.mamicode.com/"/">CSS实战精萃 - Pro CSS Techniques
<li><a href=http://www.mamicode.com/"/">CSS实战：id是狙击枪 class是双刃剑 合则两利分则两败
<li><a href=http://www.mamicode.com/"/">CSS布局实例：CSS标签切换代码实例教程
<li><a href=http://www.mamicode.com/"/">Web标准：改变您的网页制作思维方式 节省代码及结构与表现分离
<li><a href=http://www.mamicode.com/"/">解决IE7以下版本不支持无A状态伪类的几种方法！
<li><a href=http://www.mamicode.com/"/">CSS去除表格td默认间距及制作1px细线表格
</ul>
</body>
</html>
二、定义text-overflow:ellipsis; white-space:nowrap; 同样不能实现省略号效果。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>it55</title>
<style type="text/css">
ul {width:300px; margin:50px auto;}
li {width:300px; line-height:25px; text-overflow:ellipsis; white-space:nowrap;}
a {color:#03c; font-size:13px;}
a:hover {color:#000;}
</style>
</head>
<body>
<ul>
<li><a href=http://www.mamicode.com/"/">CSS实战精萃 - Pro CSS Techniques
<li><a href=http://www.mamicode.com/"/">CSS实战：id是狙击枪 class是双刃剑 合则两利分则两败
<li><a href=http://www.mamicode.com/"/">CSS布局实例：CSS标签切换代码实例教程
<li><a href=http://www.mamicode.com/"/">Web标准：改变您的网页制作思维方式 节省代码及结构与表现分离
<li><a href=http://www.mamicode.com/"/">解决IE7以下版本不支持无A状态伪类的几种方法！
<li><a href=http://www.mamicode.com/"/">CSS去除表格td默认间距及制作1px细线表格
</ul>
</body>
</html>
三、按it55.com的教程，即本文所讲的方法，同时应用： text-overflow:ellipsis; white-space:nowrap; overflow:hidden; 实现了所想要得到的溢出文本显示省略号效果：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>it55</title>
<style type="text/css">
ul {width:300px; margin:50px auto;}
li {width:300px; line-height:25px; text-overflow:ellipsis; white-space:nowrap; overflow:hidden;}
a {color:#03c; font-size:13px;}
a:hover {color:#000;}
</style>
</head>
<body>
<ul>
<li><a href=http://www.mamicode.com/"/">CSS实战精萃 - Pro CSS Techniques
<li><a href=http://www.mamicode.com/"/">CSS实战：id是狙击枪 class是双刃剑 合则两利分则两败
<li><a href=http://www.mamicode.com/"/">CSS布局实例：CSS标签切换代码实例教程
<li><a href=http://www.mamicode.com/"/">Web标准：改变您的网页制作思维方式 节省代码及结构与表现分离
<li><a href=http://www.mamicode.com/"/">解决IE7以下版本不支持无A状态伪类的几种方法！
<li><a href=http://www.mamicode.com/"/">CSS去除表格td默认间距及制作1px细线表格
</ul>
</body>
</html>
请您特别注意，text-overflow:ellipsis属性在FF中是没有效果的。
复制一下内容，直接拷贝到html文件中运行就可看到效果了
<html>
<head>
<style>
.text-overflow{
display:block;/*内联对象需加*/
width:200px;
word-break:keep-all;/* 不换行 */
white-space:nowrap;/* 不换行 */
overflow:hidden;/* 内容超出宽度时隐藏超出部分的内容 */
text-overflow:ellipsis;/* 当对象内文本溢出时显示省略标记(...) ；需与overflow:hidden;一起使用。*/
}
.table{
width:300px;
table-layout:fixed;/* 只有定义了表格的布局算法为fixed，下面td的定义才能起作用。 */
}
.table td{
width:100%;
word-break:keep-all;/* 不换行 */
white-space:nowrap;/* 不换行 */
overflow:hidden;/* 内容超出宽度时隐藏超出部分的内容 */
text-overflow:ellipsis;/* 当对象内文本溢出时显示省略标记(...) ；需与overflow:hidden;一起使用。*/
}
</style>
</head>
<body>
<div class="text-overflow">
另外附上几条刚学到的页面设计的小经验
1、页面中talbe的宽设置为100%右边还是会留下一个滚动条的空白，可以在body标记里在加上：
<body style="overflow:auto">
2、
@font-face {font-family:comic;src:url(http://url/font.eot);}
可以定义一个在本地没有的字体名称，调用方法：
<span style="font-family:comic;">just cd boy!</span>
3、firefox的document.createElement不支持内容里有HTML标签,也不支持innerText，但是支持innerHTML,可以用innerHTML指定其内容。
当文字过长时裁剪（显示省略号或只裁剪 用CSS方法，不用程序）