¿Cómo puedo obligar a un contenedor a que se ajuste siempre a dos líneas?

Tengo una demo aquí that shows what I'm aiming for. I want to wrap a line of text so that two lines of it fit in with the rest of the body text.

The catch is, my example has a br tag. The text that I want to wrap does not contain a br tag.

The box should expand or contract horizontally as required to make the text wrap to two lines.

Is there a way to achieve this with just CSS? If not, how can I do it with javascript?


I can get reasonably close with este. The text is wrapped, but the parent container won't shrink.

preguntado el 27 de agosto de 11 a las 14:08

What do you do when there is not enough space for the div to expand horizontally anymore? -

@CyberDude: I don't really care. Once that happens, I don't have a sensible way to lay it out any more. Either keep expanding, or lose text off the bottom in a hidden third line. -

The updated example won't expand too much. Just a few more words and it will be on 3 lines. -

1 Respuestas

Here's a javascript hack that works. It reads the width of the div once it has loaded, and then sets the width to be half of that.

If you want the width to be dynamic (ie, change on browser resize etc) you would need to incorporate the hack into the resize event handler.


Respondido 27 ago 11, 19:08

Ah yes it would, if it can't split the line evenly. You'd have to add a few more pixels. jsfiddle.net/hzqAB/13 - James

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.