CODEWITHSUNDEEP
css
StackOverflowNewbie
StackOverflowNewbie

Reputation: 40653

CSS - text overflow: display 2 lines of text only

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

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

Upvotes: 6

Views: 25378

Answers (4)

Saajan
Saajan

Reputation: 680

This snippet will help you.

Just Adjust Max-Height and Line-height for the change in 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;
 }

Upvotes: 11

Sowmya
Sowmya

Reputation: 26989

You can fix the height of the div and make overflow as hidden

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

DEMO UPDATED

OR

Use simple Jquery method

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

DEMO 2

Upvotes: 1

Mateusz Rogulski
Mateusz Rogulski

Reputation: 7455

I have idea of some workaround to solve your problem (couse I think this is not possible by css).

So, my solution works as follow:

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

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

You take line-height of your container and set height of container to line-height * lineCount.

jsFiddle

Upvotes: 1

Gabriele Romanato
Gabriele Romanato

Reputation: 84

A pure CSS solution would imply the use of a stated height for the text block and the ´text-overflow`property. This is rather difficult to achieve because CSS has no notion of lines. A JavaScript solution, instead, would imply a regular expression matching for the newline character.

Upvotes: 1

Related Questions