Looking for a multi-line ellipsis angular directive that will only show the More/Less link if the text exceeds a certain number of lines.
Here is the directive I have:
angular.module('app')
.directive('expandableDivContent', expandableDivContent);
expandableDivContent.$inject = ['$timeout', 'jQuery'];
function expandableDivContent($timeout, $) {
return {
restrict: 'A',
link: function (scope, element, attrs, ngFormCtrl) {
scope.expandContent = function () {
var $box = $(element).find('.expandablecontent');
var $header = $(element).find('.expand');
var minimumHeight = 50;
// get current height
var currentHeight = $box.innerHeight();
// get height with auto applied
var autoHeight = $box.css('height', 'auto').innerHeight();
// reset height and revert to original if current and auto are equal
$box.css('height', currentHeight)
.animate({
height: (currentHeight === autoHeight ? minimumHeight : autoHeight)
});
var text = currentHeight === autoHeight ? '+ MORE' : '- LESS';
$header.text(text);
}
}
}
}
My CSS for this directive:
.expandablecontent {
height: 50px;
line-height: 25px;
display: block;
overflow: hidden;
text-overflow: ellipsis;
margin-top: 10px;
}
With a line-height of 25px and max height set at 50px, it initially displays 2 lines without ellipsis "...."
This is my HTML:
<div expandable-div-content ng-if="step.comments">
<p class="expandablecontent">
<small>"{{step.comments}}"</small>
</p>
<div class="expand" ng-click="expandContent()" ng-if="step.comments.length > 50">
+ More
</div>
</div>
While this works well, I aim to display the more link only when the text exceeds 2 lines. My current condition based on character count fails when the container is resized to fit more characters into two lines.
How can I implement a scope variable in the directive to determine if the text exceeds a certain number of lines and efficiently display the More link across all modern browsers?