[Simple] DIV, Height, Centro y corte.

[reserum]

¡Buenas!
Miren, estoy trabajando en una página Web y me he topado con un problema al que nunca antes me había enfrentado...
Situación: En la "parte de arriba" de la página, junto al logo, etc, quiero poner una frase, pero deseo que ésta vaya cambiando y se puedan añadir nuevas. El problema es que, como no seré solamente yo quien introduzca las frases, quizá alguien "se pase", y si se pasa, la tabla donde está se redimensionará hacia abajo, y por lo tanto se me desproporciona toda la página y adiós.
He estado buscando y he llegado hasta aquí:

Código:

<div class="Estilo10" style="height:60px">Frase.</div>

Efectivamente, con ese código al menos consigo que si se sobrepasa no redimensione la tabla en la cual está contenido, sino que "pase por encima", vamos, el texto "sale" del div y de la tabla. Ahora tengo dos problemas: el primero, lo de "pasar por encima". Me gustaría que eso no sucediese. Es decir, si la frase sobrepasa el "height" del div, simplemente que se "corte" a partir de ahí, que se deje de ver la frase.
Y por otro lado: si la frase, por el contrario, es muy corta, me gustaría que quedara centrada verticalmente en el div, algo que no consigo, ni tan siquiera así:

Código:

<div class="Estilo10" style="height:60px; vertical-align:middle">Frase.</div>

Poniendo el vertical-align middle se queda arriba, no centrado...

Como ven, tengo dos problemas. Si sólo conocen la solución a uno, será bien recibida.

¡Gracias!

[Triby]

line-heigth:60px; podria funcionar.

[reserum]

Mucho me temo que no ha funcionado :S Pero bueno, gracias de todos modos. Poniendo eso simplemente se pone un montón de espacio entre las líneas :S

[Mikmoro]

Puedes ponerlo así:

<div class="Estilo10" style="height:60px; line-height: 56px;overflow: hidden;">Frase.</div>

[reserum]

Ok, lo del "overflow: hidden" me ha servido para "cortar" el texto al terminar el div, muchas gracias, aunque aún no entiendo por qué me dices lo de line-height, ya que yo no quería espacio entre líneas, pero bueno, el caso es que lo de cortar el texto ya está solucionado.
Ahora tan sólo queda lo de que quede centrado. Es decir, yo tengo la frase en el div, y si no es una frase muy larga (y por lo tanto no ocupa los 60px de alto) quiero que se centre verticalmente en el DIV, en lugar de empezar desde arriba. Como digo, ya he probado con vertical-align=middle; pero nada.
¡Gracias por lo de overflow:hidden Mikmoro!

[Mikmoro]

¿Y lo del line height lo has probado? es que con eso vas a centrar el texto verticalmente dentro del div. Cuando tenía dos líneas efectivamente te producía un enorme espacio entre ellas, pero al haberlo dejado sólo en una a la vista con el overflow, simplemente verás sólo la primera línea y centrada verticalmente. Sin más.

[reserum]

Exacto, Mikmoro, eso ya lo he visto, pero es que no me interesa que se vea tan sólo la primera línea... Mira, te lo pongo con fotos y creo que se me entenderá (siento mucho mi poca capacidad de expresión)
Esta imagen es cuando la frase sobrepasa el Div, y por lo tanto el Div se lo "come":
winguts.com/archives/ej2.jpg
Eso ya está hecho gracias a lo de overflow:hidden. El problema viene ahora.

Si la frase es corta, queda así:
winguts.com/archives/ej1.jpg
Y lo que busco es que no quede arriba sino en el centro del cuadro (que tiene las medidas del DIV).

¡Gracias!

[Mikmoro]

Vaya, hasta ahora no había entendido que hablabas de una frase siempre de varias líneas, que en algunos casos serían tantas que desbordarían su contenedor: creía que hablabas de una línea y si había una segunda era ya el desborde.

En ese caso el centrado vertical no es problema con display: table-cell, pero el asunto es que IE6 no entiende esto y hace que ese centrado para IE6 no sea tarea fácil.

Mira este ejemplo que es compatible con IE6, a ver si lo puedes adaptar a lo que buscas.

[reserum]

Hola: Gracias de nuevo por tu respuesta ;)
He puesto display: table-cell, de manera que me queda algo así:

Código:

<div class="Estilo10" style="height:50px; overflow: hidden; display: table-cell">

Efectivamente, cuando hay poco texto se centra verticalmente, el problema es que, cuando hay mucho texto, no se corta como pasaba sin "display: table-cell", es decir, queda así:
winguts.com/archives/ej3.jpg

Por lo tanto volvemos al principio :P
Ya siento todos estos mareos que estoy trayendo...
¡Gracias!

[reserum]

¡¡Lo he conseguido!!
Muchas gracias a todos por vuestros aportes.
Al final, ha funcionado con esto:

<div class="Estilo10" style="overflow:hidden; top: 50%; max-height:50px"><?php echo $frase; ?></div>

Lo que es la vida... Lo mejor es que funciona para Firefox e iexplorer (al menos la versión que tengo instalada, la 7, probablemente para la 6 no funcione pero bueno...)
Pues eso: max-height es lo que necesitaba. ¡Gracias a todos!