how to show long text with more button using angular?

Question

i have long text like that :-

"5 Simple Steps to Improve Patient Experience5 Simple Steps to Improve Patient Experience5 Simple Steps to Improve Patient Experience5 Simple Steps to Improve Patient Experience5 Simple Steps to Improve Patient Experience5 Simple Steps to Improve Patient Experience5 Simple Steps to Improve Patient Experience5 Simple Steps to Improve Patient Experience5 Simple Steps to Improve Patient Experience5 Simple Steps to Improve Patient Experience5 Simple Steps to Improve Patient Experience5 Simple Steps to Improve Patient Experience5 Simple Steps to Improve Patient Experience5 Simple Steps to Improve Patient Experience5 Simple Steps to Improve Patient Experience5 Simple Steps to Improve Patient Experienc "

But i need only 2 line to show on page and a more button to check complete text. Is this posible with angular.js ?

if yes What would you suggest me ?

Answer 1

Yes, this is totally possible with AngularJS -- but most of the solution is actually CSS.

You'll be able to do this mostly through CSS. First, HTML/CSS doesn't really have a concept for how many lines a bunch of text is taking up. You can get the behavior you want by setting the height of a container element and the line-height of your text on the CSS line-height. For your default state, set the height based on two times your line height and set the overflow to hidden. Then you just need have your button conditionally apply a class that expands the height of the container and sets the overflow to visible:

<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>

You can get fancy and make the button also hide the text again (as a toggle).

Answer 2

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

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

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