CSS3 text-overflow 属性

xunden 2017-01-30

实例

使用text-overflow属性：

div.test

{

text-overflow:ellipsis;

}

CSS3 text-overflow 属性

浏览器支持

表格中的数字表示支持该属性的第一个浏览器版本号。

属性
text-overflow	4.0	6.0	7.0	3.1	11.09.0 -o-

CSS3 text-overflow 属性

属性定义及使用说明

text-overflow属性指定当文本溢出包含它的元素，应该发生什么。

默认值：	clip
继承：	no
版本：	CSS3
JavaScript 语法：	object.style.textOverflow="ellipsis"

CSS3 text-overflow 属性

语法

text-overflow: clip|ellipsis|string;

值	描述
clip	修剪文本。
ellipsis	显示省略符号来代表被修剪的文本。
string	使用给定的字符串来代表被修剪的文本。

如您还有不明白的可以在下面与我留言或是与我探讨QQ群308855039，我们一起飞！

小伙伴们，感觉我的分享很不错的别忘记“赞赏”我一下哟!

: xunden

前端css实现只显示一行或者2行、3行剩余显示省略号

overflow:hidden;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-lin

zhanghao 0喜欢 / 0评论 2020-06-16

记一下永远背不下来的单行省略和多行省略代码

white-space:nowrap;overflow:hidden;text-overflow:ellipsis;overflow:hidden;max-height:44px;text-overflow:ellipsis;-webkit-box-ori

bertzhang 0喜欢 / 0评论 2019-12-25

实现溢出变省略号的方法

text-overflow: -o-ellipsis-lastline; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -we

RexLeee 0喜欢 / 0评论 2019-12-23

CSS3 text-overflow

<p>如果您把光标移动到下面两个 div 上，就能够看到全部文本。<div class="test" style="text-overflow:clip;">This is some long

王为仁 0喜欢 / 0评论 2015-05-27

CSS省略号text-overflow超出溢出显示省略号

DIV CSS text-overflow文本有溢出时显示css省略号clip ellipsis样式基础知识与用法实例经验教程篇。有时为了避免文本文字内容超出一定宽度后溢出，我们想要溢出的部分不显示但用省略号（...）显示，这个时候我们可以使用CSS te

AlisaClass 0喜欢 / 0评论 2015-12-29

css实现单行、多行文本溢出显示省略号(…)

省略号在ie中可以使用text-overflow:ellipsis了，但有很多的浏览器都需要固定宽度了，同时ff这些浏览器并不支持text-overflow:ellipsis设置了，下文来给各位整理一下兼容各浏览器显示省略号教程。大家应该都知道用text-

zhanghao 0喜欢 / 0评论 2018-01-05

css实现单行、多行文本溢出显示省略号(…)

沉着前进 0喜欢 / 0评论 2018-01-05

CSS省略号text-overflow超出溢出显示省略号

CSS省略号text-overflow超出溢出显示省略号DIV CSS text-overflow文本有溢出时显示css省略号clip ellipsis样式基础知识与用法实例经验教程篇。有时为了避免文本文字内容超出一定宽度后溢出，我们想要溢出的部分不显示但

huakaiwuxing 0喜欢 / 0评论 2015-12-29

CSS3 text-overflow

<p>如果您把光标移动到下面两个 div 上，就能够看到全部文本。<div class="test" style="text-overflow:clip;">This is some long

AlisaClass 0喜欢 / 0评论 2015-05-27

CSS基础：text-overflow:ellipsis溢出文本

今天这个问题上又踩坑了。1，由于文本宽度随内容宽度而变，因此上面的方法无效。2，使用.ha>span{}有效，使用.ha.txt无效。为什么加display:block;就行了，我理解是变成块元素后，浏览器可以计算当期宽度，然后溢出隐藏。text-o

sdbxpjzq 0喜欢 / 0评论 2014-01-15

css文字截断

.img_info .info h6 a{ font-size:14px;display: inline-block;max-width:170px;overflow: hidden;white-space:nowrap;text-overflow:ell

xvzhengyang 0喜欢 / 0评论 2013-08-15

css li 不换行没用到，留着

white-space:nowrap; /**强制不换行*/. overflow:hidden; /**自动隐藏文字*/. -o-text-overflow:ellipsis; /**适用于opera浏览器 */

walliam 0喜欢 / 0评论 2013-07-24

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

html代码：<div><p><span>CSS Web Design 我爱CSS-Web标准化 Div+css教程 - www.52css.com</span><p></div>cs

gigipop 0喜欢 / 0评论 2013-05-06

CSS text-overflow

　　请您注重，text-overflow:ellipsis属性在FF中是没有效果的。假如用标题截取函数，则标题不是完整的，假如我们用CSS样式text-overflow:ellipsis，输出的标题是完整的，只是受容器大小的局限不显示出来罢了。　　关于te

impress 0喜欢 / 0评论 2013-04-09

css强制不换行，超出用省略号显示

上面的这种方案，在IE7和Opera中应该能够完美的体现出他的效果了。但是Firefox目前并不支持CSS3中的text-overflow:ellipsis，所以这种方法还是有缺陷的，算是不完全版。另外，在连接的title标签里加入完整的文章标题，这样想知

impress 0喜欢 / 0评论 2012-11-29

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

<p><span>CSSWebDesign我爱CSS-Web标准化Div+css教程-www.52css.com</span><p>. 今天有朋友在52css.com的留言板提出一个问题：为什么text-ov

teresalxm 0喜欢 / 0评论 2012-11-18

text-overflow:ellipsis溢出显示省略号兼容所有浏览器的解决办法

我想大家在做项目的时候都遇到这样的需求：对于一些列表文本过长溢出显示省略号，我们可以text-overflow:ellipsis很简单地达到效果，很遗憾不能兼容火狐浏览器。text-overflow被列入了CSS3属性，火狐对于标准的实现一向都很好，很郁闷

pworld 0喜欢 / 0评论 2012-09-26

CSS基础：text-overflow:ellipsis溢出文本

（clip这个参数是不常用的！设置或检索是否使用一个省略标记（...）标示对象内文本的溢出。请您注重，text-overflow:ellipsis属性在FF中是没有效果的。假如用标题截取函数，则标题不是完整的，假如我们用CSS样式text-overflow

新海说 0喜欢 / 0评论 2014-05-19

CSS3 text-overflow 属性

相关推荐