border-radius; desbordamiento: oculto, y el texto no está recortado

Question

Estoy haciendo un texto estilístico dentro de divs redondeados, donde el texto choca contra la parte superior del contenedor. He podido controlar casi todo el contenido, divs anidados, imágenes establecidas como fondos, etc., y tuve todos ellos recortar con éxito, pero este me ha estado causando un gran dolor.

Usar los bordes de la imagen de la vieja escuela o los encubrimientos no es una solución ya que tenemos fondos gráficos dinámicos. Necesitamos una solución para en realidad recortar el texto.

Esto es sobre todo visible en Firefox 3.x o más versiones de Chrome

Aquí está el código de ejemplo para jugar con:

http://jsfiddle.net/vfp3v/1/

div { 
    -moz-border-radius: 45px; 
    border-radius: 45px; 
    background-color: #ccc; 
    font-size: 100px; 
    color: #777; 
    line-height: 70%; 
    overflow: hidden; 
    width: 257px; 
} 

la jank:

Aviso que ha sido fijado en el nuevo Chrome y Firefox 4 - el feng:

La mayoría de nuestros usuarios del sitio son Firefox 3.6, por lo que le encantaría ser capaz de proporcionar una solución elegante para ellos también. Cualquier ayuda apreciada! Saludos

Answer 1

Esta funciona en FF 3.6: http://jsfiddle.net/vfp3v/15/

tiene algunos inconvenientes, como se puede ver en el segundo ejemplo (en FF 3.6) de la frontera recortada tiene un color sólido, por lo que si usted está usando alguna tipo de fondo esto podría verse feo. Solo échale un vistazo, podría ajustarse a tus necesidades.

Acabo de añadir un lapso:

<div><span></span>WXYZ</div> 

y luego la colocó sobre el texto con un borde en el mismo color que el fondo, y un desplazamiento tan grande como la frontera:

div{ 
    position:relative; 
    etc... 
} 
span{ 
    position:absolute; display:block; width:100%; height:100%; 
    border:25px solid #fff; top:-25px; left:-25px; 
    -moz-border-radius: 70px; border-radius: 70px; /* 45 radius + 25 border */  
} 

edit: acaba de probar esto en chrome 10.0.6 (que tiene el error de recorte) y funcionó!

En navegadores que soportan correctamente el radio del borde, el tramo (y su borde de color) ni siquiera es visible porque está recortado (desbordamiento: oculto).