I have an application that receives a giant text from the database.
I want to display only the first paragraph and put a text saying "SEE COMPLETE DESCRIPTION" just below and when I click open in a modal or even in the div where the rest of the text is. I do not have any code yet.
use a blend of Angular with CSS.
In the example below, $scope.compacto controls the view mode.
ng-class="{'compact': compacto}" causes the css class compact to be added to the element if the value of $scope.compacto is true .
Use text-overflow: ellipsis to indicate to the user that more text is available.
angular.module('myApp', [])
.controller('myController', function($scope){
$scope.compacto = true;
$scope.toggle = function(){
$scope.compacto = !$scope.compacto;
console.log($scope.compacto);
}
$scope.texto = '
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed pellentesque lacus accumsan sodales consequat. Aenean eleifend nunc nec sapien dictum, eu dictum augue lobortis. Cras egestas dapibus ultricies. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aenean vitae libero vitae lorem ullamcorper convallis. Proin vel arcu a sem congue semper et at est. Nulla euismod massa in turpis sodales, et dictum felis eleifend. Cras eget eros a purus consectetur congue sed in nisl.
Integer lectus sapien, faucibus at nibh id, venenatis suscipit orci. Sed et placerat mauris. Sed blandit arcu vitae massa pulvinar, non lobortis velit pellentesque. Quisque in mauris ac ligula venenatis mattis. Integer at condimentum mauris. Duis molestie ac leo eget efficitur. Maecenas viverra mauris erat, ac congue nisl finibus sit amet. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent porttitor rutrum nibh sit amet blandit. Aliquam eu arcu tristique justo tempus accumsan nec vehicula libero.
Ut vitae congue quam. Aenean ac tristique nibh. Morbi condimentum ex non orci vulputate, sed semper orci cursus. Morbi eget justo ligula. Nunc tempor justo eu nisi malesuada, vitae viverra arcu vestibulum. Cras id cursus libero, vitae imperdiet diam. Curabitur mollis quam dolor, vel malesuada leo facilisis in. Nunc vitae mattis lacus, et sodales nisi.
Vivamus maximus, sem a facilisis dictum, ligula enim maximus tortor, vitae egestas ex sem vitae justo. Curabitur fringilla tempus nisi, et commodo leo feugiat ac. Aliquam pretium in felis a tincidunt. Fusce porta, sapien vitae facilisis pretium, mauris sapien suscipit dui, vel fringilla diam nisi sit amet sapien. Aliquam sed leo ac mi porta vehicula a sed sem. Duis molestie erat nec nibh finibus, ac interdum diam varius. Maecenas dolor purus, vestibulum in imperdiet et, pellentesque at ipsum. Donec euismod lectus a ullamcorper aliquet.
Cras laoreet enim ut ligula rutrum fringilla. Quisque urna metus, consectetur eget leo ut, fringilla ultrices magna. Aenean suscipit mauris vitae pulvinar sagittis. Nunc augue purus, cursus facilisis enim vel, sollicitudin interdum tortor. Donec eget mattis libero, quis imperdiet purus. Quisque non sem nec elit elementum consectetur. Aenean quis enim gravida, aliquam ligula a, malesuada arcu. Curabitur quam ante, finibus vitae eros nec, gravida suscipit dolor. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Proin gravida non felis feugiat pulvinar. Fusce aliquet nunc ante, et congue orci pretium at. Nam id elit congue mi vehicula dignissim. Donec sapien justo, vestibulum vel ultrices ut, rhoncus quis justo. Proin commodo suscipit massa eget placerat. Nunc nec gravida turpis, sit amet consequat enim. Nam posuere, dui placerat tempor finibus, lorem velit vehicula enim, et sodales nibh nunc vitae erat.';
});.container {
max-width:300px;
border:1px solid black;
padding:4px;
}
.compact {
overflow: hidden;
text-overflow: ellipsis;
white-space:nowrap;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.js"></script><divng-app="myApp">
<div ng-controller='myController'>
<div class='container' ng-class="{'compact': compacto}" ng-click="toggle()">
{{texto}}
</div>
</div>
</div>