Angular show more button determined by line count, not letter count

Question

Angular show more button determined by line count, not letter count

I am looking for a solution in Angular or CSS that will automatically add a "read more" button if the text is longer than 5 lines. My Angular page currently limits text to 150 characters.

{{post.post_text | limitTo:letterLimit}}

However, some posts are too long because they contain multiple line breaks:

my post
line 2
line 3
l
i
n
e

While these posts are still under 150 characters, they begin to disrupt the layout of my page. I am seeking a solution that will add a "read more" button for text longer than 5 lines.

As a beginner in Angular, I am unsure where to start and would appreciate any assistance.

so far

I have only come across solutions based on character count, but I require a solution based on the number of lines or total line-height. Any help on this matter would be greatly appreciated. Thank you.

css angularjs ellipsis

Answer 1

Answer №1

If you're looking to implement a filter, you might want to consider this approach:

{{post.post_content | textLimit:charLimit | displayLines:lineLimit}} // adjust line limit by toggling show more

app.filter('displayLines', function() {
    return function(text, limit) {

        var segments = text.split("\n");

        if(limit == 0) return segments.join('<br/>');
        return segments.slice(0,limit).join('<br/>');
    }
})

In your view:

<button class="show-more" ng-if="checkLines(checkLines(resource.body)"></button>

In your Controller:

$scope.line_limit_default = 4;// example value

function checkLines(text) {
  if(text && text != null) {   
    return (text.split("\n").length > $scope.line_limit_default) ? true : false;
  } else return false;
};

Answer 2

If you're looking to implement a filter, you might want to consider this approach:

{{post.post_content | textLimit:charLimit | displayLines:lineLimit}} // adjust line limit by toggling show more

app.filter('displayLines', function() {
    return function(text, limit) {

        var segments = text.split("\n");

        if(limit == 0) return segments.join('<br/>');
        return segments.slice(0,limit).join('<br/>');
    }
})

In your view:

<button class="show-more" ng-if="checkLines(checkLines(resource.body)"></button>

In your Controller:

$scope.line_limit_default = 4;// example value

function checkLines(text) {
  if(text && text != null) {   
    return (text.split("\n").length > $scope.line_limit_default) ? true : false;
  } else return false;
};

Angular show more button determined by line count, not letter count

Answer №1

Similar questions

Dealing with issues related to AngularJS auto-tab functionality

Trouble Loading TypeScript Class in Cast Situation

Properly implement changes in scope following the receipt of server-sent events

What is the best way to change the background color for my photo gallery?

Height of Parent Div minus Margin Top equal to 100%

Tips for fixing the position without affecting the width

Highlighting table column when input is selected

Unusual shift in behavior - <input> on Windows 8.1

Navigate using Ui-Router or else utilize ng-admin

Can a low-opacity gradient be merged with a solid background color?

Converting JSON into Typescript class within an Angular application

Steps for opening a clicked link in a new tab:

Concealing or revealing an image with jQuery when hovering

Ways to transfer JavaScript arguments to CSS style

Accessing the current clicked item in $scope using an Angular Directive within ng-repeat

Discover the method for creating internal links on a single page with AngularJS

Modifying KineticJs.Image with css styling

Is it possible for me to position an element beside the element before it?

The tooltip for the Google+ button stopped working

I'm curious about the significance of the "packages" property in the requireJs config. Can someone explain how it functions?