0

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>
Jim Tsatsos
  • 15
  • 3

2 Answers2

1

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.

Diodeus - James MacFarlane
  • 112,730
  • 33
  • 157
  • 176
  • You are right! You cannot do this with CSS alone! I had been searching and testing for this the last 3 days. So, I'm taking new approach to this. I will not use JavaScript, it's easier for me to process the text in PHP, break it in half with br tag and then use white-space:nowrap to expand only in width – Jim Tsatsos Mar 05 '13 at 16:14
0

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).

Community
  • 1
  • 1
rz-requilel
  • 56
  • 5
  • but i dont want to hide the overflowing text – Jim Tsatsos Mar 04 '13 at 21:49
  • http://stackoverflow.com/questions/10584020/overriding-overflow-hidden/10584273#10584273 Would this be a solution for you? I know that overflow:hidden will hide any child-elements, so this may be something. – rz-requilel Mar 04 '13 at 21:54