zoukankan      html  css  js  c++  java
  • [工作经验]前端开发过程中常用技巧总结

    多行文本溢出显示省略号(...)的方法

    现在的浏览器都支持text-overflow:ellipsis属性,用来实现单行文本的溢出显示省略号。

    如:

    单行文本:

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

    一些其他技巧可参考:http://www.zhangxinxu.com/wordpress/?p=230

    多行文本:

    text-overflow:ellipsis;
    display:-webkit-box;
    -webkit-line-clamp:3;
    -webkit-box-orient:vertical;

    但是这个属性并不支持多行文本。那么有没有方法在多行文本上实现同样的效果呢?

    除了各个浏览器私有的属性,有没有跨浏览器的解决方法呢?当然是通过js实现啦!(通过从后向前逐个删除末尾字符,直至元素的高度小于父元素高度)
    $(".content").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)(...)?$/, "..."));
        };
    });
  • 相关阅读:
    观众查询界面
    排球积分程序
    产品会议
    本周工作量及进度统计
    排球积分规则
    我与计算机
    排球记分员
    怎样成为一个高手观后感
    第十八周冲刺
    十六周
  • 原文地址:https://www.cnblogs.com/mrxia/p/4267329.html
Copyright © 2011-2022 走看看