14

我有这样的长文本：-

“改善患者体验的5个简单步骤5改善患者体验的简单步骤5改善患者体验的简单步骤5改善患者体验的简单步骤5改善患者体验的简单步骤5改善患者体验的简单步骤5改善患者体验的简单步骤5改善患者体验的简单步骤5改善患者体验的简单步骤5 改善患者体验的简单步骤5 改善患者体验的简单步骤5 改善患者体验的简单步骤5 改善患者体验的简单步骤5 改善患者体验的简单步骤5 改善患者体验的简单步骤5 改善患者体验的简单步骤”

但我只需要在页面上显示 2 行和一个更多按钮来检查完整的文本。这对 angular.js 可行吗？

如果是的话，你会建议我什么？

4

5 回答 5

23

是的，AngularJS 完全可以做到这一点——但大多数解决方案实际上是 CSS。

您将能够主要通过 CSS 来做到这一点。首先，HTML/CSS 并没有关于一堆文本占用多少行的概念。您可以通过在 CSS 上设置容器元素的高度和文本的 line-height 来获得所需的行为line-height。对于您的默认状态，根据您的线高的两倍设置高度并将其设置overflow为隐藏。然后你只需要让你的按钮有条件地应用一个扩展容器高度并将其设置overflow为可见的类：

<style>
    .container {
         font-size: 16px;
         line-height: 16px;
         height: 32px;
         overflow: hidden;
    }
    .show {
         overflow: visible;
         height: auto;
    }
<div class="container" ng-class="{show: show}">
    [your text]
</div>
<button ng-click="show = true">Show text</button>

您可以花哨并使按钮也再次隐藏文本（作为切换）。

于 2013-10-04T05:55:16.830 回答
9

ng-text-truncate
https://github.com/lorenooliveira/ng-text-truncate

演示 1
https://rawgit.com/lorenooliveira/ng-text-truncate/master/demo1.html

例子
<p ng-text-truncate="longTextVariable" ng-tt-chars-threshold="40"></p>

于 2015-09-21T23:30:54.473 回答
5

角度阅读更多
https://github.com/ismarslomic/angular-read-more

演示
http://codepen.io/ismarslomic/pen/yYMvrz

<div hm-read-more
        hm-text="{{ text }}" 
        hm-limit="100" 
        hm-more-text="read more" 
        hm-less-text="read less"
        hm-dots-class="dots"
        hm-link-class="links">
</div>
于 2016-05-05T07:03:11.100 回答
3

如果您希望div根据像素高度而不是字符数截断自身，您可以试试这个。这允许您将嵌套的 HTML 放在可展开部分中。

angular.module('app', [])
.controller('TestController', function($scope) {
  $scope.loremIpsum = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.';
})
.directive('showMore', function() {
  return {
        restrict: 'A',
        transclude: true,
        template: [
            '<div class="show-more-container"><ng-transclude></ng-transclude></div>',
            '<a href="#" class="show-more-expand">More</a>',
            '<a href="#" class="show-more-collapse">Less</a>',
        ].join(''),
        link: function(scope, element, attrs, controller) {
            var maxHeight = 45;
            var initialized = null;
            var containerDom = element.children()[0];
            var $showMore = angular.element(element.children()[1]);
            var $showLess = angular.element(element.children()[2]);

            scope.$watch(function () {
                // Watch for any change in the innerHTML. The container may start off empty or small,
                // and then grow as data is added.
                return containerDom.innerHTML;
            }, function () {
                if (null !== initialized) {
                    // This collapse has already been initialized.
                    return;
                }

                if (containerDom.clientHeight <= maxHeight) {
                    // Don't initialize collapse unless the content container is too tall.
                    return;
                }

                $showMore.on('click', function () {
                    element.removeClass('show-more-collapsed');
                    element.addClass('show-more-expanded');
                    containerDom.style.height = null;
                });

                $showLess.on('click', function () {
                    element.removeClass('show-more-expanded');
                    element.addClass('show-more-collapsed');
                    containerDom.style.height = maxHeight + 'px';
                });

                initialized = true;
                $showLess.triggerHandler('click');
            });
        },
  };
});
.show-more-container {
    overflow: hidden;
}

.show-more-collapse, .show-more-expand {
    text-align: center;
    display: none;
}

.show-more-expanded > .show-more-collapse {
    display: inherit;
}

.show-more-collapsed > .show-more-expand {
    display: inherit;
}
<script src="https://code.angularjs.org/1.5.8/angular.js"></script>
<div ng-app="app" ng-controller="TestController">
  <div show-more>
    All sorts of <strong>stuff</strong> can go in here.
    {{ loremIpsum }}
    <div>Even more divs</div>.
  </div>
  
  <div show-more>
    This <strong>won't</strong> truncate.
  </div>
</div>

于 2016-10-19T17:37:00.473 回答
0

我认为有一个更简单的方法。
只需替换{{text}}为{{text | limitTo: 150}}，然后在下面创建简单的阅读更多链接。

于 2019-05-06T15:52:24.300 回答