How do I add an ellipsis after two lines?
Can I add ellipsis after two lines of text? I can add ellipsis on one line, but if the text is large, I want it to display the text on two lines. If the text is even larger, I want to show an ellipsis after the second line.
Here is my code:
.columnFontfamily{
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
It is different from this because it is on the second line as well. Any update regarding this?
source to share
Following these links,
- Window.getComputedStyle (...)
- Element.clientHeight instead of Element.getBoundingClientRect ()
- line-height
- box-sizing
- text-overflow (please check browser support)
Decision
I provide this method, considering that your element only has flat text (I have nothing to do with challenging our calculations)
<style>
div /** dont' fail to note that I've remove the white-space property **/
{
border: 1px black dotted; /** just to see the borders **/
box-sizing: content-box; /** this is very important, see the doc OR you will have to fetch and convert the padding-top and padding-bottom in your `new height` calculations **/
text-overflow: ellipsis;
overflow: hidden;
width: 220px;
}
</style>
<div>
Mollit sint adipisicing ipsum mollit duis dolor consectetur ullamco magna esse.
Tempor voluptate qui pariatur anim occaecat sunt laborum sunt dolore id.
Aliquip excepteur aute nulla duis eu cillum.
Lorem ad aute aliquip cillum.
Lorem ea dolore laboris pariatur adipisicing duis eiusmod labore elit Lorem incididunt consectetur consequat.
</div>
<script>
+function()
{
'use strict';
var element = document.querySelector('div');
var style = element.ownerDocument.defaultView.getComputedStyle(element); // Why using `element.ownerDocument.defaultView` because the element may come from a different window, like iframe
var lineHeight = parseInt(style.lineHeight.replace(/[a-z]+$/)); // I could have said /px$/ but the doc from MDN says nothing about the standard units
// Here the magic
var NUMBER_OF_LINES_TO_SHOW = 2;
element.style.height = (NUMBER_OF_LINES_TO_SHOW * lineHeight) + "px"; // or the unit in use for that browser
}();
</script>
(During these tests I upgraded from firefox 45.0.2
to firefox 46
) and restarted the browser ... Among the extensions does not work, it seems text-overflow
not too
source to share
I have a quick solution, if you just understand what I am doing you can get a solution to this problem
I have 2 methods: counts the line numbers, the other returns the text in the exact line at the given line number.
by this approach, if the line count is greater than 2, then get the first 2 lines of text, create another temple and add it to the container
$( document ).ready(function() {
function countLines() {
var divHeight = parseInt( $(".maxTwoLine").height() );
var lineHeight = parseInt($('.maxTwoLine').css('line-height'));
return divHeight/lineHeight;
}
function GetTextLine(lineNumber){
var lines = $('.maxTwoLine').text().split(' ');
console.log(lines);
for(var i = 0;i < lines.length;i++){
if(i === lineNumber)
{
return lines[i];
}
}
}
$(".clickB").click(function(){
var lineCounter = countLines();
if(lineCounter>1)
{
var allText = $('.maxTwoLine').text();
var firstLineText = GetTextLine(0);
var secondLineText = GetTextLine(1);
var template = firstLineText + '<div class="ellipsisText">' + secondLineText + '</div>';
$('.maxTwoLine').text("");
$('.maxTwoLine').append(template);
allText = allText.replace(secondLineText, template);
}
var container = ".maxTwoLine";
});
});
source to share