CSS text-transform aprovecha todas las mayúsculas

Aquí está mi HTML:

small caps & ALL CAPS 

Aquí está mi CSS:

 .link {text-transform: capitalize;} 

El resultado es:

 Small Caps & ALL CAPS 

y quiero que la salida sea:

 Small Caps & All Caps 

¿Algunas ideas?

No hay forma de hacer esto con CSS, puedes usar PHP o Javascript para esto.

Ejemplo de PHP:

 $text = "ALL CAPS"; $text = ucwords(strtolower($text)); // All Caps 

Ejemplo de jQuery (¡ahora es un complemento!):

 // Uppercase every first letter of a word jQuery.fn.ucwords = function() { return this.each(function(){ var val = $(this).text(), newVal = ''; val = val.split(' '); for(var c=0; c < val.length; c++) { newVal += val[c].substring(0,1).toUpperCase() + val[c].substring(1,val[c].length) + (c+1==val.length ? '' : ' '); } $(this).text(newVal); }); } $('a.link').ucwords();​ 

Casi puedes hacerlo con:

 .link { text-transform: lowercase; } .link:first-letter { text-transform: uppercase; } 

Le dará la salida:

 Small caps All caps 

¡Interesante pregunta!

capitalize transforma cada letra de una palabra en mayúscula, pero no transforma las otras letras en minúsculas. Ni siquiera la pseudo-clase de :first-letter lo cortará (porque se aplica a la primera letra de cada elemento, no a cada palabra), y no puedo ver una forma de combinar letras minúsculas y mayúsculas para obtener el resultado deseado.

Por lo que puedo ver, esto es realmente imposible de hacer con CSS.

@Harmen muestra soluciones alternativas de PHP y jQuery atractivas en su respuesta.

Convertir con JavaScript usando .toLowerCase() y capitalize haría el rest.

captialize solo afecta la primera letra de la palabra. http://www.w3.org/TR/CSS21/text.html#propdef-text-transform

JavaScript:

 var links = document.getElementsByClassName("link"); for (var i = 0; i < links.length; i++) { links[i].innerHTML = links[i].innerHTML.toLowerCase(); } 

CSS:

 .link { text-transform: capitalize; } 

Lo que Khan "terminó haciendo" (que es más limpio y funcionó para mí) está abajo en los comentarios de la publicación marcada como la respuesta.

Puede ser útil para java y jstl.

  1. Inicializar variable con mensaje localizado.
  2. Después de eso, es posible usarlo en la función jstl toLowerCase.
  3. Transformar con CSS.

En JSP

1.

  

2.

  

En CSS

3.

 .content { text-transform:capitalize; } 

¡Puedes hacerlo con la primera letra de css! por ejemplo, lo quería para el menú:

 a {display:inline-block; text-transorm:uppercase;} a::first-letter {font-size:50px;} 

Solo funciona con elementos de bloque, ¡por lo tanto, el bloque en línea!

Si los datos provienen de una base de datos, como en mi caso, puede bajarlos antes de enviarlos a una lista de selección / lista desplegable. Es una pena que no puedas hacerlo en CSS.

link {text-transform: minúscula! importante;}

enlace: primera letra {text-transform: mayúscula;}

mayúscula transforma cada letra de una palabra en mayúscula, pero no transforma las otras letras en minúsculas. Entonces, use text-transform: mayúscula en la primera letra, y text-transform: minúscula en el rest. Trabajó para mi.

Después de investigar mucho encontré la función / expresión jquery para cambiar el texto en la primera letra en mayúsculas solamente, modifico ese código en consecuencia para que sea viable para el campo de entrada. Cuando escriba algo en el campo de entrada y luego pase a otro elemento o archivo, el texto de ese campo cambiará solo con mayúsculas de 1.er letra. No importa el texto del tipo de usuario en mayúsculas completas o mayúsculas completas:

Sigue este código:

Paso-1: Llamar a la biblioteca jquery en html head:

  

Paso-2: escriba el código para cambiar el texto de los campos de entrada:

  

Paso 3: crea campos de entrada HTML con los mismos identificadores que usas en el código jquery como:

  

La identificación de este campo de entrada es: edit-submitted-first-name (Se usa en el código jquery en el paso-2)

** Resultado: asegúrese de que el texto cambie después de mover el foco desde ese campo de entrada en otro elemento. Porque usamos focus out event de jquery aquí. El resultado debería ser el siguiente: Tipo de usuario: “gracias” cambiará con “Gracias”. **

La mejor de las suertes

No pude hacer ningún comentario sobre Harmen por falta de reputación, por lo que volví a escribir la misma respuesta de harmen. He agregado LowerCase () a la respuesta para que pueda convertir “ALL CAPS” en “All Caps”.

 $.fn.ucwords = function() { return this.each(function(){ var val = $(this).text(), newVal = ''; val = val.split(' '); for(var c=0; c < val.length; c++) {newVal += val[c].substring(0,1).toUpperCase() + val[c].substring(1,val[c].length).toLowerCase() + (c+1==val.length ? '' : ' '); } $(this).text(newVal); }); $('a.link').ucwords();​ 

todo está mal, existe -> variante de fuente: small-caps;

texto-transformar: capitalizar; solo la primera letra mayúscula