1

I have a div container that gets filled with changing text elements (via jQuery). That container may not exceed a maximum width (e.g. 200px) and maximum height (e.g. 80px). The basic solution for me is here:

http://jsbin.com/lutejeka/3/edit?html,css

(Note: I used the table only to make the text appear vertically centered. And the borders are there only to see what's going on -> black line is outer edge of available area, red line is the size of the table cell)

Now, as the text length increases it first pushes the width of the table cell to the limit of the div box and only once that max width is achieved the line breaks. I would find it much more aesthetically pleasing if a line break would be forced as soon as a certain aspect ratio of the text is exceeded (say keep width:height of text between 2 and 5 if possible; also, keep length of lines similarly long). Once max height is achieved only width can be increased (once max width is then also achieved the overflowing text will be hidden).

Is there a way to do this? Thank you for taking a look.

Puzzled
  • 74
  • 5
  • You won't be able to control the aspect ratio of an element with it's content. You can control the aspect ratio of an element according to it's width or height but not based on it's content. – web-tiki Jul 11 '14 at 09:20
  • Ok, so could I either a) keep aspect ratio at 1:3 until max height is reached, then expand horizontally only until max width is reached and then spill over or b) manipulate the text string depending on its length and add
    to it?     – Puzzled Jul 12 '14 at 09:17
  • I am not shure I understand clearly what you are trying to achieve. here is a link to a question with several techniques : http://stackoverflow.com/questions/1495407/css-a-way-to-maintain-aspect-ratio-when-resizing-a-div but they are always based on the size of the container (width or height) and not on the size of it's content. – web-tiki Jul 12 '14 at 10:37
  • Thank you, then it's probably not possible. What I'd need is to change the width depending on the length of the text inside. – Puzzled Jul 14 '14 at 10:45

0 Answers0