html 文本溢出解决方案

最新推荐文章于 2024-01-29 11:09:57 发布

原创最新推荐文章于 2024-01-29 11:09:57 发布 · 1.5k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#html #多行 #文本溢出

本文提供了两种处理多行文本溢出的方法：一种是通过截断文本并添加省略号来适应容器高度；另一种则是利用JavaScript计算容器可以显示的行数，并设置-webkit-line-clamp属性。

下面附两种解决多行文本溢出的方案

    $('.fig').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)(\.\.\.)?$/, "..."))
        }

    });


    //这种方式不如第一种好~
    var Overflow = (function () {

        function _text() {
            this.ele = arguments[0];
        }

        _text.prototype = {
            //根据字体大小 行高 求出 clamp
            deal: function () {
                var height = parseInt($('#pp').css('height'));
                var lineHeight = this.ele.css('line-height');
                var fontSize = this.ele.css('fontSize');
                var num = (height / (parseInt(fontSize) + (parseInt(lineHeight) - parseInt(fontSize)))).toString();
                alert(num);
                this.ele.css('-webkit-line-clamp', function () {
                    return num.indexOf('.') > 0?num.substring(0, num.indexOf('.')):num;
                });

            }
        };

        return _text;

    })();


    new Overflow($('#pp')).deal();