In this post we are going to see about the multiline ellipses support in all browsers, normally when we have a huge text in a span or div, but we didn't have a space to display it, due to the overflow instead of displaying the full text we are decide to show a ellipses text with certain number of lines along with ... character, but normally ellipses supports in single line for all browsers. when overflow occurs.But for a multiline ellipses so many browsers doesnt have support especially IE, in Chrome we have a support for multiline ellipses. now we are going to see how to achieve a multiline ellipses in all browsers as common one. For this we have to use a angular plugin or module
rgClamp:
**********
rgModule :
****************
Download the plugin from the following link . Multiline Ellipsis plugin
1. Add the plugin in the angular module.
2. Refer the attribute rg-clamp="3" in the element where we need ellipsis along with number of lines.
Now you can get a ellipsis text like below
Js:
**********
Add the module name in the controller rgModule and use the rg-clamp directive in the html
From this post you can see how to create a Multiline ellipses support for all browsers
rgClamp:
**********
/**
* Created by Rajesh on 22-11-2014.
*/
angular.module('rgModule', []).directive('rgClamp', function () {
return {
scope: {
rgClamp: '='
},
restrict: 'A',
link: function (scope, element, attrs, cntrl) {
var elementheight = 0;
var lineheight = 0;
var maxlines = 0;
var prefferedHeight = 0;
var truncatedHeight = 0;
var originalData = element.text();
var truncatedData = '';
var datachunks = [];
var chunkno = 0;
elementHeight();
getLineHeight();
getMaxLines();
getPreferredHeight();
//setElementHeight();
SplitData();
ellipsisData();
setEllipsis();
truncatedHeight = elementheight;
chunkno = datachunks.length;
function setElementHeight() {
element.css('height', prefferedHeight);
}
function getPreferredHeight() {
prefferedHeight = Math.max(Math.round(scope.rgClamp * lineheight), 0);
}
function getMaxLines() {
maxlines = Math.max(Math.floor(elementheight / lineheight), 0);
}
function getLineHeight() {
lineheight = getProp('line-height');
if (lineheight == 'normal') {
lineheight = parseInt(getProp('font-size')) * 1.2;
} else {
lineheight = parseInt(lineheight);
}
}
function getProp(prop) {
return element.css(prop);
}
function elementHeight() {
elementheight = element.height() || element.maxHeight || element.clientHeight;
}
function SplitData() {
datachunks = originalData.split(' ');
}
function setEllipsis() {
/* clamping words */
while (truncatedHeight <= prefferedHeight) {
if (datachunks[chunkno] == undefined) {
break;
}
var clampedtext = element.text();
element.text(clampedtext + ' ' + datachunks[chunkno]);
elementHeight();
truncatedHeight = elementheight;
if (truncatedHeight > prefferedHeight) {
element.text(clampedtext);
break;
}
chunkno++;
}
/* clamping letters */
var letterchunks = datachunks[chunkno].split('');
var clampedtext = element.text();
for (var j = 0; j < letterchunks.length; j++) {
element.text(clampedtext + letterchunks[j]);
elementHeight();
truncatedHeight = elementheight;
if (truncatedHeight > prefferedHeight) {
element.text(element.text().substring(0, element.text().length - 1));
break;
}
}
clampedtext = element.text();
element.text(clampedtext.substring(0, clampedtext.length - 4) + '...');
}
/* truncated height must be equal or less than preffered height */
function ellipsisData() {
truncatedHeight = elementheight;
chunkno = datachunks.length;
while (truncatedHeight > prefferedHeight) {
if (prefferedHeight <= (truncatedHeight / 2)) {
chunkno = Math.max(Math.round(chunkno / 2), 0);
} else {
var interno = Math.max(Math.round(chunkno / 2), 0);
var interim = interno + Math.max(Math.round(interno / 2), 0);
if (interim == chunkno) {
chunkno = interim - 1;
}
else {
chunkno = interim;
}
}
truncatedData = '';
for (var i = 0; i < chunkno; i++) {
truncatedData += datachunks[i] + ' ';
}
element.text(truncatedData);
elementHeight();
truncatedHeight = elementheight;
}
}
}
}
});
rgModule :
****************
Download the plugin from the following link . Multiline Ellipsis plugin
1. Add the plugin in the angular module.
2. Refer the attribute rg-clamp="3" in the element where we need ellipsis along with number of lines.
Now you can get a ellipsis text like below
Js:
**********
Add the module name in the controller rgModule and use the rg-clamp directive in the html
/**
* Created by Rajesh on 22-11-2014.
*/
var clampModule = angular.module('clampModule', ['rgModule']);
clampModule.controller('clampController', function ($scope) {
});
************
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link href="css/bootstrap.min.css" rel="stylesheet" />
</head>
<body data-ng-app="clampModule" class="bg-info">
<div ng-controller="clampController" style="margin-left:100px">
<h1 class="well text-danger" rg-clamp="4">
The
human species' use of technology began with the conversion of natural resources
into simple tools. The prehistoric discovery of how to control fire increased
the available sources of food and the invention of the wheel helped humans in
travelling in and controlling their environment.
</h1>
<div>
<p class="well text-success" rg-clamp="3" style="">
Technology
is the collection of tools, including machinery, modifications, arrangements
and procedures used by humans. Engineering is the discipline that seeks to
study and design new technologies. Technologies significantly affect human as
well as other animal species' ability to control and adapt to their natural
environments. The term can either be applied generally or to specific areas:
examples include construction technology, medical technology and information
technology
.</p>
</div>
</div>
<script type="application/javascript" src="js/jquery-2.0.0.min.js"></script>
<script type="application/javascript" src="js/bootstrap.min.js"></script>
<script type="application/javascript" src="js/angular.min.js"></script>
<script type="application/javascript" src="js/rgModule.js"></script>
<script src="ang/angClamp.js"></script>
<script>
</script>
</body>
</html>
Output:
******************
Text with specified lines along with ellipses ...
From this post you can see how to create a Multiline ellipses support for all browsers
