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

Question

我有这么长的文字: -

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

但我只需要在页面上显示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-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>

Answer 3

angular-read-more
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>