Clever Geek Handbook

CSS - text overflow: display only 2 lines of text

Given the long line of content, I only want to display the first 2 lines of text. The container for this content is fluid and will resize to the width of the browser. Regardless of the width of the container, I want the text to always show only two lines. Is there a way to do this?

If there is no way to do this, is there a way to limit based on the number of characters?

+3


source to share


4 answers


This snippet will help you.

Just change the Max. height and Linear height to change the font size.



 .limit-2 {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    line-height: 21px;
    max-height: 48px;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
 }
+5


source


You can fix the div height and do overflow

likehidden 

    div{
    height:auto;
    max-height:40px;
    overflow:hidden; 
    background:red
}

UPDATED DEMO

OR



Use a simple method Jquery 

$('p').condense({ellipsis:'…', condensedLength: 55});

DEMO 2

+1


source


A pure CSS solution implies using the specified height for the text box and the "text overflow" property. This is quite difficult to achieve because CSS has no concept of strings. Instead, a JavaScript solution would imply a regex for the newline character.

+1


source


I have an idea for a workaround to solve your problem (couse, I think this is not possible for css).

So my solution works like this:

var height = parseInt($("#foo").css("line-height"));
var lineCount = 2;
height *= lineCount;

$("#foo").css("height", height + "px");

You take line-height

your container and place the height

container in line-height * lineCount

.

jsFiddle

+1


source






More articles:


All Articles