I need a multi-line ellipsis angular directive where I can have ellipsis after x lines and display More/Less link conditionally only if the text is more than x lines.
below is my directive
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
.expandablecontent {
height: 50px;
line-height: 25px;
display: block;
overflow: hidden;
text-overflow: ellipsis;
margin-top: 10px;
}
As I have line-height=25px and max height as 50px it shows 2 lines initially 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>
This works perfectly but I need to display more link only if text exceeds more than 2 lines and the container is responsive my current condition to display link if text is more than 50 characters fails as when the container is resized more than 50 characters can fit into two lines.
How could I display more link conditionally by using a scope variable in directive which helps me determine that text is more than x number of lines which works in all modern browsers.
