css文本自动省略问题

【DIV+CSS】

下载

新闻

文章

css文本自动省略问题

在网页中，文本超长处理方法常常我们是使用css限制。当然也常常有人非得后台程序硬去截取字符，结果即对不齐又不利seo优化。

width:585px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;

如上css在一个块内，定义宽度后禁止换行超出隐藏并以省略号显示，是最佳选择。

可是某个时候能不能在第二行或者多行的最后一行省略呢？

我们找到一个css3属性-webkit-line-clamp

<p style="
  overflow : hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;/*表示第2行末尾省略*/
  -webkit-box-orient: vertical;
">好长好的内容</p>

很可惜它没在css3规范草案中，也局限在webkit浏览器中，firefox、IE等不支持，注定不能生存。

没办法，我们暂时用javascript替换着。

<div style="width: 200px;height: 40px">
    <p>很长很长的文本</p>
</div>
<script>
$(function(){
    $("div").each(function(i){
        var divH = $(this).height();
        var $p = $("p", $(this));
        while ($p.outerHeight() > divH) {
            $p.text($p.text().replace(/\s*.(\.{3})?$/, "..."));
        }
    });
})
</script>

原理就是每减少一个文字然后判断一下高度是否高过父节点，如果循环赶到符合条件。