Rumah > Artikel > hujung hadapan web > 单行及多行文本溢出以省略号显示的方法总结_html/css_WEB-ITnose
需求:
在前端页面布局中,经常会有因文字过多而影响页面排版。特别是在移动端页面中,因屏幕宽度不够段落文字如完全显示则会打乱布局。因此若段落文字能根据屏幕空余大小而显示就完美了,也就是若屏幕够大,段落文字就完全显示,若屏幕很小,则段落文字以省略号的形式部分显示。
解决办法:
在CSS3中有text-overflow属性,不熟悉的同学可以点此查询。用来实现单行文本的溢出显示省略号,单行文本的溢出显示省略号在现代浏览器及移动端都能实现兼容。
效果如图:
实现方法:
<p>作为微软的游戏平台,Xbox已经出现在了Windows Phone和Windows 8中,就在最近,微软宣布将旗下的Zune消费品牌也一并整合至Xbox品牌下,Xbox Live服务影响力越来越大,渗透面也越来越广。</p>
p { width: 410px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
问题来了:如果我们要实现多行文本溢出显示省略号呢?
解决办法:Webkit支持一个名为-webkit-line-clamp的属性,不熟悉的同学可以点此查询。这个属性是一个 不规范的属性(unsupported WebKit property),它没有出现在 CSS 规范草案中。但在webkit内核的浏览器中可以使用。
效果如图:
实现方法:
.figcaption { background: #EEE; width: 410px; height: 3em; margin: 1em; } .figcaption p { line-height: 1.5em; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; /*因使用了WebKit的CSS扩展属性,该方法适用于WebKit浏览器及移动端;*/ }
问题又来了:如何在其他主流浏览器中实现完美兼容呢?看来还得靠JS实现
解决办法:
(实现原理:通过从后向前逐个替换末尾字符,直至元素的高度小于父元素高度)
<script src="http://apps.bdimg.com/libs/jquery/1.11.3/jquery.min.js"></script><script type="text/javascript"> $(".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)(\.\.\.)?$/, "...")); }; });</script>