CODEWITHSUNDEEP
htmlcssline-breaks
Jim Tsatsos
Jim Tsatsos

Reputation: 15

limiting entire html text into 2 lines

I have various with dimensions (defined with CSS) height:50px, width:100px. I want the text inside each to break approximately in half (only if it is too long) and expand the if necessary, in order to fit in it.

Now, when the text length requires extra space, breaks into 3 or more lines and overflows the , but I don't want neither to hide nor scroll the text.

You can see the code here:

CSS:
    div {
        font-size: 20px;
        border: 1px solid;
        width: 100px;
        height: 50px;    
    }
html:
     <div>Lorem ipsum dolor sit amet</div>

Upvotes: 0

Views: 536

Answers (2)

rz-requilel
rz-requilel

Reputation: 56

This should do the work

div {
display: inline-block;
border: 1px solid;
width: 100px;
height: 50px;  
overflow: hidden;
}

Of course you'd need to alternate the width and height if you have a different or longer text — in this Topic (as mentioned earlier) multiple solutions are provided (PHP/CSS).

Upvotes: 0

Diodeus - James MacFarlane
Diodeus - James MacFarlane

Reputation: 114417

You cannot do this with CSS alone. You need to use JavaScript to detect the height and adjust either the font size of the box width accordingly.

Upvotes: 1

Related Questions