css - texto - text-transform capitalize not working

Forzar la entrada en mayúsculas al título en CSS usando la transformación de texto

Question

Estoy creando un tema para un CMS, y solo puedo cambiar el CSS asociado con la página (sin Javascript, PHP, etc.).

¿Hay alguna manera de cambiar esta lista de usuarios que tenemos:

JOHN SMITH
David jones
...

en el caso del título adecuado (John Smith, etc.) usando CSS?

text-transform: lowercase; funciona bien (john smith, etc.) pero text-transform: capitalize; no hace nada (permanece en mayúscula).

Según lo solicitado, el HTML es:

<tr> [...] <td class="cell c1">ALEXANDER MULLER</td> [...] </tr>
<tr> [...] <td class="cell c1">JOHN SMITH</td> [...] </tr>

Y el CSS es:

td {
    text-transform: capitalize;
}

Answer 1

En su situación, la única forma en que he logrado que esto funcione es con el uso de javascript. Como dicen las otras respuestas, la transformación capitalizada no hace el truco.

Creo que si este es un requisito, entonces tendrás que encontrar una manera de limpiar los nombres en sentido ascendente. Puede capitalizarlos correctamente o convertirlos a minúsculas para que la transformación CSS funcione como se espera.

Andrés

Answer 2

Esto muestra que text-transform: capitalize está funcionando para mí en IE, Chrome y FF para Windows:

http://www.tizag.com/cssT/text.php

¿Qué estás usando para probarlo?

Answer 3

He enfrentado este problema varias veces cuando el texto viene en mayúsculas desde un CMS o base de datos. Lo que hago es usar la función .Q de jQuery para recorrer en iteración los elementos seleccionados, aplicar un método JavaScript aLowerCase a cada uno, luego usar CSS para configurar la transformación de texto: capitalizar.

Funciona cada vez!

Answer 4

Lo que estás experimentando es cómo funciona. Esto es de la especificación :

" mayúscula Pone el primer carácter de cada palabra en mayúsculas; otros caracteres no se ven afectados".

Ahora, puedes hacerlo (supongo que tienes una lista con las etiquetas de elemento de lista <li> :

li:first-letter {
    text-transform: uppercase;
}

Junto con tu minúscula de la li, pero en combinación, eso solo afectará las primeras palabras de cada línea, para que obtengas:

John smith
David jones

No creo que haya una solución CSS pura para ti aquí. Esto es complicado debido a nombres como John McCain, Oscar de la Hoya, John Smith PhD, Jane Smith MD y personas que prefieren las letras minúsculas como Danah Boyd o Ee Cummings. Siempre hay excepciones cuando intentas usar Title Case. Estas excepciones le causarán dolores de cabeza. Si no tienes control sobre el contenido, el contenido te dará dolores de cabeza.

Answer 5

Podemos usar un truco para hacerlo. Pero ten cuidado con la compatibilidad del navegador. https://developer.mozilla.org/en-US/docs/Web/CSS/::first-letter

p{
  text-transform: lowercase;
 }

p:first-letter{
  text-transform: uppercase;
}

P.ej:

este es un texto Este es un texto esto es un poco de texto.

Salida -> Esto es un texto

Answer 6

text-transform: capitalize; solo modifica la primera letra de cada palabra, por lo que si la primera letra de una palabra ya está en mayúscula, la transformación de texto omite esa palabra.

Ejemplo:

JoHN smith se convertirá en JoHN Smith

No hay forma de hacer la carátula del título usando solo CSS a menos que todas sus palabras estén en minúsculas.