CODEWITHSUNDEEP
javascripthtmlcssangularjs
zochhuana
zochhuana

Reputation: 187

How to display multiple lines in angularjs with limit on line length

I want to output some lines in only two mutliple lines using angular js (with a bit of CSS?) and each line should have a limit/length, and also if the output becomes more than 2 lines, the last word should be preceded by "..." and still make two lines.

For example, "aaaa, bbbbbbbb, cccc, dddd, eeee, ffff, gggg, hhhh, iiii"

Output should be:

  aaaa, bbbbbbbb
  cccc, ... iiii

Any suggestions appreciated.

Upvotes: 1

Views: 6488

Answers (4)

Nikos
Nikos

Reputation: 3

You can achieve this with angular as follows: Create a directive which sets the height of the element depending the lines you want to show and the height of each line. Then you set a class with overflow: hidden and in your html you set the values in the directive.

angular.module('scopePropertiesModule', [])
  .directive('zsLinesHeight', ['$timeout',
        function () {
            return {
                restrict: 'AE',
                scope: {
                    lines: '=',
                    height: '='
                },
                link: function (scope, element) {                    
                        const lineHeight = scope.lines*scope.height;
                        element.prop('parentElement').style.height = `${lineHeight}px`;
                }
            }
        }
    ]);
.show-more-less {
  overflow: hidden;
  word-break: break-word;
  line-height: 15px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.0/angular.min.js">
</script>
<div ng-app="scopePropertiesModule">
<div class="show-more-less">
<zs-lines-height lines="3" height="15">
Ascetic chaos decrepit philosophy reason insofar oneself contradict depths ultimate snare decrepit suicide ocean. Endless intentions pinnacle mountains decieve superiority. Decieve love intentions convictions law right sea gains derive oneself intentions contradict. Spirit hatred overcome chaos free sexuality hatred ultimate marvelous salvation. Love justice intentions holiest free victorious right virtues convictions overcome. Oneself hope transvaluation good value play right will inexpedient virtues salvation endless. Battle pinnacle transvaluation christianity right gains value virtues law. Of aversion of aversion 
        </zs-lines-height>
        </div>
        </br>
        <div class="show-more-less">
        
<zs-lines-height lines="1" height="15">
 Love justice intentions holiest free victorious right virtues convictions overcome. Oneself hope transvaluation good value play right will inexpedient virtues salvation endless. Battle pinnacle transvaluation christianity right gains value virtues law. Of aversion of aversion 
        </zs-lines-height>
        </div>
</div>

Then you can use css (::after) to achieve the 3dots styling or any other.

Upvotes: 0

raneshu
raneshu

Reputation: 413

It depends on where you get the input from. If you get the input as a string - like this: 

  "aaaa, bbbbbbbb, cccc, dddd, eeee, ffff, gggg, hhhh, iiii"

Follow these steps:

1)In you controller, creat a scope variable and assign it to the input array. Like so:

angular.module('myApp',[])
  .controller('myController', [function(){
      //first convert input to an array. Be careful here. I'm assuming a space after each comma
      this.input ="aaaa, bbbbbbbb, cccc, dddd, eeee, ffff, gggg, hhhh, iiii".split(", ");
      this.limit1 = 3//limit of characters in the first line. You could have any number here! Not just 3.
      this.input2 = (this.input).slice(this.limit, this.input.length-2);//second line
      this.final = this.input[this.input.length -1]; //final word
 }]);

2)In you view you can use ng-repeat to put out the words. Like so:

<body ng-controller="myController as ctrl">
  <span ng-repeat = "word in ctrl.input|limitTo:ctrl.limit1">{{word}}, </span><br/>
  <span ng-repeat = "word in ctrl.input2">{{word}}, </span>...{{this.final}}

</body>

Upvotes: 1

nanndoj
nanndoj

Reputation: 6770

you can do it only by using css

<div id="test" class="verticalcut">aaaa, bbbbbbbb, cccc, dddd, eeee, ffff, gggg, hhhh, iiii</div>

This is the css code:

#test {
    width: 100px;
    background-color: #F00;
}


.verticalcut {
   overflow: hidden;
   text-overflow: ellipsis;
   display: -webkit-box;
   -webkit-box-orient: vertical;
   -webkit-line-clamp: 2; /* number of lines to show */
   line-height: 1;        /* fallback */
}

Take a look at this jSFiddle: http://jsfiddle.net/nanndoj/oz24szf3/

Upvotes: 8

Andrew E
Andrew E

Reputation: 8317

  1. Use a directive to do the "value into multiple lines" part, and

  2. Use a filter to insert the ellipsis ("...") for lines that are too long.

Technically for (1) you don't need a directive, just plain template code like <div><p ng-repeat="...">... will work, but a directive will probably end up nicer.

If you try the above and still run into issues, edit the question (or ask another) with a jsfiddle/plunkr for more specific feedback.

Upvotes: 3

Related Questions