实现溢出变省略号的方法

RexLeee 2019-12-23

第一种（单行文本）

 white-space: nowrap; overflow: hidden; text-overflow: ellipsis; 

要使用

 white-space: nowrap; 

尽量别使用<nobr></nobr>标签 可能会导致不兼容的情况发生

第二种（多行文本）

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

只需把2改成想要显示的行数 即可达到效果。

RexLeee

RexLeee

相关推荐

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

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

zhanghao / 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评论 2019-12-25

CSS3 text-overflow

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

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

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

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

AlisaClass / 0评论 2015-12-29

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

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

zhanghao / 0评论 2018-01-05

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

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

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

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

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

huakaiwuxing / 0评论 2015-12-29

CSS3 text-overflow

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

AlisaClass / 0评论 2015-05-27

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

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

sdbxpjzq / 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评论 2013-08-15

css li 不换行 没用到，留着

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

walliam / 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评论 2013-05-06

CSS text-overflow

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

impress / 0评论 2013-04-09

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

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

impress / 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评论 2012-11-18

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

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

pworld / 0评论 2012-09-26

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

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

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

CSS3 text-overflow 属性

表格中的数字表示支持该属性的第一个浏览器版本号。text-overflow属性指定当文本溢出包含它的元素，应该发生什么。值描述clip修剪文本。ellipsis显示省略符号来代表被修剪的文本。string使用给定的字符串来代表被修剪的文本。如您还有不明白的

xunden / 0评论 2017-01-30