Question

我有这么长的文字： -

＆＃34;改善患者体验的5个简单步骤5改善患者体验的简单步骤5改善患者体验的简单步骤5改善患者体验的简单步骤5改善患者体验的简单步骤5改善患者体验的简单步骤5改善患者体验的简单步骤5改善患者体验的简单步骤5改善患者体验的简单步骤5改善患者体验的简单步骤5改善患者体验的简单步骤5改善患者体验的简单步骤5改善患者体验的简单步骤5改善患者体验的简单步骤5改善患者体验的简单步骤5简单步骤改善患者体验＆＃34;

但是我只需要在页面上显示2行，并且需要更多按钮来检查完整文本。这是有效的angular.js？

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

Answer 1

是的，AngularJS完全可以实现 - 但大多数解决方案实际上都是CSS。

您将能够通过CSS主要执行此操作。首先，HTML / CSS实际上没有关于一堆文本占用多少行的概念。您可以通过在CSS 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>

你可以看上去并让按钮再次隐藏文字（作为切换）。

Answer 2

NG-文本截断
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>

Answer 3

角读更
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>

Answer 4

如果您希望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>

Answer 5

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

如何使用更多按钮显示长文本？

5 个答案: