javascript - 带有条件更多链接的 Angular 多线省略号

Question

我需要一个多行省略号 Angular Directive(指令)，我可以在 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

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

因为我有 line-height=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 然后添加溢出隐藏，文本溢出:省略号。