Question

我需要一个多行省略号角度指令，我可以在x行之后使用省略号，并且仅当文本超过x行时才有条件地显示更多/更少链接。

下面是我的指示

 angular.module('app')
        .directive('expandableDivContent', expandableDivContent);

    expandableDivContent.$inject = ['$timeout', 'jQuery'];

    function expandableDivContent($timeout, $) {
        return {
            restrict: 'A',
            link: function (scope, element, attrs, ngFormCtrl) {

                scope.expandContent = function () {
                    var $box = $(element).find('.expandablecontent');
                    var $header = $(element).find('.expand');

                    var minimumHeight = 50;
                    // get current height
                    var currentHeight = $box.innerHeight();

                    // get height with auto applied
                    var autoHeight = $box.css('height', 'auto').innerHeight();

                    // reset height and revert to original if current and auto are equal
                    $box.css('height', currentHeight)
                        .animate({
                            height: (currentHeight === autoHeight ? minimumHeight : autoHeight)
                        });

                    var text = currentHeight === autoHeight ? '+ MORE' : '- LESS';
                    $header.text(text);

                }
            }
        }
    }

我的css for this

.expandablecontent {
    height: 50px;
    line-height: 25px;
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-top: 10px;
}

由于我的行高= 25px，最大高度为50px，它最初显示2行，没有省略号“....”

这是我的HTML

<div expandable-div-content ng-if="step.comments">
                    <p class="expandablecontent">
                        <small>"{{step.comments}}"</small>
                    </p>
                    <div class="expand" ng-click="expandContent()" ng-if="step.comments.length > 50">
                         + More
                    </div>
                </div>

这很好用但我只需要显示更多的链接，如果文本超过2行，并且容器响应我当前条件显示链接，如果文本超过50个字符失败，因为容器调整大小超过50个字符可以分为两行。

如何通过在指令中使用范围变量来有条件地显示更多链接，这有助于我确定文本超过x个在所有现代浏览器中都有效的行数。

Answer 1

你可以尝试类似的东西，如果你知道你的行高是18px / em那么，设置容器div的高度（要显示的文本，如果你需要创建一个）是（n * x）px / em然后添加overflow-hidden，带文本溢出：省略号。

具有条件更多链接的角度多线省略号

1 个答案: