现在的浏览器都支持text-overflow:ellipsis
属性,用来实现单行文本的溢出显示省略号,但是这个属性并不支持多行文本。那么有没有方法在多行文本上实现同样的效果呢?
-webkit-line-clamp
Webkit支持一个名为-webkit-line-clamp
的属性,他其实是一个WebKit-Specific Unsupported Property,也就是说这个属性并不是标准的一部分,可能是Webkit内部使用的,或者被弃用的属性。但是既然被人发现了,而且能用,为什么不试试呢~o(∩_∩)o
p { overflow : hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } |
Demo: http://jsfiddle.net/Cople/maB8f/
-o-ellipsis-lastline
从 Opera 10.60 开始,text-overflow属性有了一个名为-o-ellipsis-lastline
的值。应用后的效果就像名字一样,在文本的最后一行加上省略号。这个方法比楼上的方法简单多了,可惜也不在标准之内//(ㄒoㄒ)//
p { overflow: hidden; white-space: normal; height: 3em; text-overflow: -o-ellipsis-lastline; } |
Demo: http://jsfiddle.net/Cople/ash5v/
jQuery
除了各个浏览器私有的属性,有没有跨浏览器的解决方法呢?当然是通过js实现啦!(通过从后向前逐个删除末尾字符,直至元素的高度小于父元素高度)
$(".figcaption").each(function(i){ var divH = $(this).height(); var $p = $("p", $(this)).eq(0); while ($p.outerHeight() > divH) { $p.text($p.text().replace(/(\s)*([a-zA-Z0-9]+|\W)(\.\.\.)?$/, "...")); }; }); |
相关推荐
CSS实现单行、多行文本溢出显示省略号(…)示例文档,自行下载查看
多行文本溢出显示省略号
实现方法:效果如图:但是这个属性只支持单行文本的溢出显示省略号,如果我们要实现多行文本溢出显示省略号呢。实现方法:效果如图:适用范围:该方法适用范围广,但文字未
...
...
jQuery文字溢出显示省略号插件是一款基于dotdotdot.js插件实现的单行多行文本溢出显示省略号
但是这个属性并不支持多行文本溢出显示省略号,这里根据应用场景介绍几个方法来实现这样的效果。 WebKit浏览器或移动端的页面 在WebKit浏览器或移动端(绝大部分是WebKit内核的浏览器)的页面实现比较简单,可以直接...
如果实现单行文本的溢出显示省略号同学们应该都知道用text-overflow:ellipsis属性来,当然还需要加宽度width属来兼容部分浏览
主要介绍了css多行文本溢出时出现省略号的示例的相关资料,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
单行文本与多行文本溢出时显示省略号的CSS设置
dotdotdot.js插件是一款基于jQuery实现的单行多行文本文字内容超出溢出部分显示省略号的代码。
引导省略号为溢出文本添加省略号的快速方法版本 1.0.0 这个插件基于 [dobiatowski] ( ) 的这个项目。 请参阅的性能演示。 ####Dependencies: [jQuery] ( ) 如果你想使用工具提示,那么也 [twitter-bootstrap] ( ) #...
单行、多行文本溢出显示省略号插件dotdotdot.js
单行文本的控制,以前是由程序员完成的,实现截字效果。 今天介绍的方法兼容IE FF,看下面的详细介绍: 为了更符合实际,用一个div装起要调试的内容,并为这个div定义一个宽度。 例如:css代码:div{width:200px;}...
在我们的日常开发工作中,文本溢出截断省略是很常见的一种需考虑的业务场景细节。看上去 “稀松平常” ,但在实现上却有不同的区分,是单行截断还是多行截断?...单行文本溢出省略 核心 CSS 语句 overflow: h
jQuery文字溢出显示省略号插件是一款基于dotdotdot.js插件实现的单行多行文本溢出显示省略号
//溢出用省略号显示 white-space:nowrap; //溢出不换行 但是第三条属性,只能显示一行,不能用在这里,那么如果显示多行呢? 超出两行隐藏: css3解决了这个问题,解决方法如下: display:-webkit-box; //将对象作为...
主要介绍了CSS实现标题文字过长部分显示省略号的方法,并且讲解了针对单行文字溢出和多行文字溢出的情况,需要的朋友可以参考下