No creo que haya una buena solución.
he llegado a una solución para usted, aunque escamosa:
.test:first-letter {
font-size: 2em;
letter-spacing: -0.225em;
}
agrega el estilo letter-spacing al selector :first-letter en su violín, y usted encontrará los bloques se remontan a más o menos la derecha tamaño.
Explicación:
Básicamente, el fallo está siendo causado por todo el bloque de tomar su tamaño de la fuente especificada en el first-letter.
Lo que estoy haciendo aquí con letter-spacing es intentar ajustar el tamaño de esta fuente, sin afectar su apariencia física. Ajustar el espacio entre letras de esta manera en el texto normal daría como resultado que las letras se superpongan entre sí por .225 del ancho de un carácter en cada lado.
Inicialmente esperaba que un valor de -0.25 fuera suficiente, es decir, un cuarto de carácter en cada lado reduciría el ancho de cada carácter a la mitad, que sería lo que queremos porque la primera letra es font-size:2em Por lo tanto, es dos veces más grande.
Sin embargo, el cálculo no es tan claro, ya que el primer y el último caracteres de la cadena solo se superponen en un lado cada uno, y porque la primera letra realmente quiere ser de doble ancho, incluso si el resto de los personajes no.
Todo esto significa que el valor exacto letter-spacing requerido para contrarrestar el error variará dependiendo de cuánto tiempo el texto, así como los tamaños de fuente del texto original y la primera letra. Esta es la razón por la que tuve que experimentar un poco con el valor del espaciado entre letras para que funcione, y también explica por qué no pude lograr un ajuste perfecto en todas las filas de texto en tu Fiddle. Hubiera necesitado un valor ligeramente diferente para cada bloque.
El valor de -0.225 parece ser lo más cerca que puedo llegar a que sea correcto para todos sus ejemplos, pero en la práctica tendrá que ajustarlo para adaptarse a su sitio.
No olvide también que este es un error de Firefox, y por lo tanto tendrá que escribirlo como un truco específico del navegador de algún tipo. Y tenga cuidado de no perder de vista el informe de errores de Firefox que ha vinculado; cuando se solucione, tendrás que encontrar la manera de mantener el truco para los usuarios de versiones antiguas, pero eliminarlo para los usuarios con la solución.
[EDIT]
La única otra solución de trabajo se me ha ocurrido con no consiste simplemente en utilizar las características que provocan el fallo. es decir, suelte el selector :first-letter y use un <span> por separado para la primera letra de su texto si desea darle un estilo diferente.
Esta es la respuesta obvia en realidad, y por supuesto resolvería el problema (y también significaría que su primera letra con estilo funciona en navegadores más antiguos), pero no sería ideal desde una perspectiva semántica, y lo más importante no lo hace En realidad, respondo la pregunta, y es por eso que no la ofrecí como una solución en mi respuesta original.
He estado tratando de encontrar un trabajo alternativo para el error, pero las opciones son limitadas, y nada de lo que he probado ha dado tan buenos resultados como mi sugerencia inicial.
He intentado hackear el :first-letter invisible, y usando :before para mostrar la gran letra mayúscula inicial. Sin embargo, esto no funcionó para mí. No me entretuve demasiado tiempo para que puedas ponerlo en funcionamiento, pero hay un problema en que deberías definir la letra principal en tu CSS, lo que no sería ideal.
Otra posible solución es usar la propiedad CSS font-stretch: condensed; en el :first-letter. Esto reduciría el ancho de la primera letra a 1em, y así resolvería la cuestión del ancho del resto del texto. Los inconvenientes de esto, sin embargo, son que, en primer lugar, haría que la letra principal se vea aplastada, lo que probablemente no sea lo que desea, y en segundo lugar, este estilo solo funciona para las fuentes que admiten la propiedad condensed. Resulta que esto no está bien soportado por las fuentes estándar, por lo que puede no ser viable para usted.
Al final, la solución original letter-spacing sigue siendo la única forma que he encontrado para solucionar el problema.
Esto sigue siendo un error. Agregué otra solución que creo que es más simple, usando '-moz-padding-end'. – RustyToms
Gracias. Nos encontramos con este error EXACTO hoy. – thinsoldier