频道导航

CSS 单行溢出文本显示省略号...的方法（兼容IE FF）（转）

2019-02-07 CSS 前端之家

前端之家收集整理的这篇文章主要介绍了CSS 单行溢出文本显示省略号...的方法（兼容IE FF）（转），前端之家小编觉得挺不错的，现在分享给大家，也给大家做个参考。

<div class="UBBContent"><a href="http://www.52css.com/article.asp?id=602">http://www.52css.com/article.asp?id=602

<div class="UBBContent">===================================================

<div class="UBBContent">
<div class="UBBContent">html代码：

CSS Web Design 我爱CSS-Web标准化 Div+css教程 - www.52css.com

css代码：div{<font color="#ff0000">width:200px;/容器的基本定义/height:200px;background-color:#eee;}/ IE下的样式 / p span{display: block;<font color="#ff0000">width:200px;/对宽度的定义,根据情况修改/overflow: hidden;white-space: nowrap;text-overflow: ellipsis;}/ FF 下的样式 / p{clear:both;}p span{float:left;<font color="#ff0000">max-width:175px; /IE不能解释该属性<font color="#000000">，而<font color="#ff0000">FF可以/}<font color="#ff0000">p:after{content:"...";}

================================================--------------------------------------------------------------学习篇：

今天有朋友在52css.com的留言板提出一个问题：为什么 text-overflow:ellipsis的时候没有任何效果呀？text-overflow是一个比较特殊的属性，在CSS手册中，这个属性是这样定义的：　　语法：　　text-overflow : clip | ellipsis 　　参数：　　clip : 　不显示省略标记（...），而是简单的裁切　　（clip这个参数是不常用的！）　　ellipsis : 　当对象内文本溢出时显示省略标记（...）　　说明：　　设置或检索是否使用一个省略标记（...）标示对象内文本的溢出。　　示例：　　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; 不能实现省略号效果。">">52CSS

实战精萃 - Pro CSS Techniques
实战：id是狙击枪 class是双刃剑合则两利分则两败
布局实例：CSS标签切换代码实例教程
标准：改变您的网页制作思维方式节省代码及结构与表现分离
">解决IE7以下版本不支持无A状态伪类的几种方法！
去除表格td默认间距及制作1px细线表格

二、定义text-overflow:ellipsis; white-space:nowrap; 同样不能实现省略号效果。">">52CSS

实战精萃 - Pro CSS Techniques
实战：id是狙击枪 class是双刃剑合则两利分则两败
布局实例：CSS标签切换代码实例教程
标准：改变您的网页制作思维方式节省代码及结构与表现分离
">解决IE7以下版本不支持无A状态伪类的几种方法！
去除表格td默认间距及制作1px细线表格

　三、按52css.com的教程，即本文所讲的方法，同时应用： text-overflow:ellipsis; white-space:nowrap; overflow:hidden; 实现了所想要得到的溢出文本显示省略号效果：不过请注意此方法适用与IE与OP浏览器，FF不适用！">">52CSS

实战精萃 - Pro CSS Techniques
实战：id是狙击枪 class是双刃剑合则两利分则两败
布局实例：CSS标签切换代码实例教程
标准：改变您的网页制作思维方式节省代码及结构与表现分离
">解决IE7以下版本不支持无A状态伪类的几种方法！
去除表格td默认间距及制作1px细线表格

--------------------------------------------------------------------------------------------------------------------实际解决问题篇：（可能还不是很完美，仅供大家参考。）　　单行文本的控制，以前是由程序员完成的，实现截字效果。　　在52css.com以前的文字中，也介绍过，通过CSS也实现这样的效果：　　如何设置列表(li)超出部分显示省略号？　　　　CSS基础：text-overflow:ellipsis溢出文本显示省略号的详细方法　　（上面所写的学习篇就是以上两个连接的内容）　　上面的两种方法是以前介绍给大家的。它们存在着一定的局限，只能对IE起效果，而在FF下时无效的。　　在FF下面，是直接截断文字，不会加上“…”。今天介绍的方法兼容IE FF，看下面的详细介绍：　　为了更符合实际，我用一个div装起要调试的内容,并为这个div定义一个宽度。　　例如：css代码：div{width:200px;}HTML代码：

CSS Web Design 我爱css-Web标准化 Div+css教程 - www.52css.com

　在IE中实现是非常简单的，CSS 如下：

}

　　但在FF中用上面的样式是实现不了的,因为现在在FF下看到的仅仅只是把溢出的内容切除了，说到"溢出切除",这下说到点子上了，在FF中实现就要用到非常规的方法:一个标签作切除内容，再加一个标签作填补省略号用，并且加起来的长度就能超过容器的宽度，本例指的就是DIV的宽度200px，实现的想法就是这样。那么继续进一试验，关于切除内容，这个已经基本上解决了，那就来说补省略号，不用JS，伪对象不懂的就要先去温故或百度一下。先从HTML下手，为span标签外再加一层p标签（当然你也可以加其它标签的）

HTML代码：

<span>CSS Web Design 我爱css-Web标准化 Div+css教程 - www.52css.com

　　我们再为这个P标签加样式。

　　这样还不行，因为了，下面要做的就是让span 加省略号的宽度不大于容器宽度(准确的说是相等)，并且让省略号紧跟内容的内容，下面就是解决上面这些问题的CSS样式：

}

　　这里还要补充的一点是关于p span 的宽度用了属性，IE不能解释该属性，而,这样就避开了IE对SPAN宽度的重新应用。上面说得有乱，归纳如下：

HTML代码：

CSS Web Design 我爱css-Web标准化 Div+css教程 - www.52css.com

css代码：div{height:200px;background-color:#eee;}/* IE下的样式 */ p span{display: block;修改*/overflow: hidden;white-space: nowrap;text-overflow: ellipsis;}/* FF 下的样式 */ p{clear:both;}p span{float:left;属性*/}