带有条件更多链接的角度多行省略号

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

.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 然后添加溢出隐藏，带有文本溢出：省略号。