CSS text-transform capitalize en mayúsculas

Aquí está mi HTML:

<a href="#" class="link">small caps</a> & 
<a href="#" class="link">ALL CAPS</a>

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, podría 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; }

Te dará el resultado:

Small caps
All caps

Convierte con JavaScript usando .toLowerCase()y capitalizeharía el resto.

¡Interesante pregunta!

capitalizetransforma cada primera letra de una palabra en mayúsculas, pero no transforma las otras letras en minúsculas. Ni siquiera el:first-letter pseudo-clase lo cortará (porque se aplica a la primera letra de cada elemento, no a cada palabra), y no puedo ver una forma de combinar 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 buenas soluciones PHP y jQuery en su respuesta.

Me gustaría sugerir una solución CSS pura que sea más útil que la solución de primera letra presentada pero que también sea muy similar.

.link {
  text-transform: lowercase;
display: inline-block;
}

.link::first-line {
  text-transform: capitalize;
}

<div class="link">HELLO WORLD!</div>
<p class="link">HELLO WORLD!</p>
<a href="#" class="link">HELLO WORLD!  ( now working! )</a>

Aunque esto se limita a la primera línea, puede ser útil para más casos de uso que la solución de la primera letra , ya que aplica mayúsculas a toda la línea y no solo a la primera palabra. (todas las palabras en la primera línea) En el caso específico del OP esto podría haberlo resuelto.

Notas: ¡ Como se menciona en los comentarios de la solución de la primera letra , el orden de las reglas CSS es importante! También tenga en cuenta que he cambiado la <a>etiqueta de una <div>etiqueta, porque por alguna razón el pseudo-elemento ::first-lineno funciona con <a>etiquetas de forma nativa , pero cualquiera <div>o <p>están muy bien. EDITAR: el <a>elemento funcionará si display: inline-block;se agrega a la .linkclase. ¡Gracias a Dave Land por ver eso!

Nueva Nota: si el texto se ajusta , perderá las mayúsculas porque de hecho ahora está en la segunda línea (la primera línea todavía está bien).

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á en los comentarios de la publicación marcada como la respuesta.

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

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)

<fmt:message key="some.key" var="item"/>

2)

<div class="content">
  <a href="#">${fn:toLowerCase(item)}</a>
</div>

En CSS

3)

.content {
  text-transform:capitalize;
}

¡Puedes hacerlo con css primera letra! 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 reducirlos antes de enviarlos a una lista de selección / lista desplegable. Es una pena que no puedas hacerlo en CSS.

Después de investigar mucho, encontré que jquery function / expression cambiaba el texto en la primera letra solo en mayúscula, modifico ese código en consecuencia para que sea viable para el campo de entrada. Cuando escribes algo en el campo de entrada y luego te mueves a otro archivo o elemento, el texto de ese campo cambiará solo con mayúsculas en la primera letra. No importa el tipo de texto del usuario en mayúsculas o minúsculas completas:

Sigue este código:

Paso 1: Llame a la biblioteca jquery en html head:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

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

<script>
$(document).ready(function(){
$("#edit-submitted-first-name,#edit-submitted-last-name,#edit-submitted-company-name, #edit-submitted-city").focusout(function(){
var str=$(this).val();
str = str.toLowerCase().replace(/\b[a-z]/g, function(letter) {
    return letter.toUpperCase();
});
$(this).val(str);
 });});

 </script>

Paso 3: cree campos de entrada HTML con los mismos ID que usa en el código jquery como:

<input type="text" id="edit-submitted-first-name" name="field name">

El id de este campo de entrada es: edit-submit-first-name (Se usa en código jquery en el paso 2)

** Resultado: asegúrese de que el texto cambiará después de mover su enfoque de ese campo de entrada a otro elemento. Porque usamos foco fuera de evento de jquery aquí. El resultado debería ser el siguiente: Tipo de usuario: "gracias", cambiará con "Gracias". ** **

La mejor de las suertes

La solución PHP, en backend:

$string = `UPPERCASE`
$lowercase = strtolower($string);
echo ucwords($lowercase);

Sé que esta es una respuesta tardía, pero si desea comparar el rendimiento de varias soluciones, tengo un jsPerf que creé.

Las soluciones Regex son las más rápidas con seguridad.

Aquí está el jsPerf: https://jsperf.com/capitalize-jwaz

Hay 2 soluciones regex.

El primero usa /\b[a-z]/g. El límite de palabras será palabras en mayúscula, como no divulgación a No divulgación.

Si solo desea poner en mayúscula las letras precedidas por un espacio, use la segunda expresión regular

/(^[a-z]|\s[a-z])/g

si está usando jQuery; Esta es una forma de hacerlo:

$('.link').each(function() {
    $(this).css('text-transform','capitalize').text($(this).text().toLowerCase());
});

Aquí hay una versión más fácil de leer que hace lo mismo:

//Iterate all the elements in jQuery object
$('.link').each(function() {

    //get text from element and make it lower-case
    var string = $(this).text().toLowerCase();

    //set element text to the new string that is lower-case
    $(this).text(string);

    //set the css to capitalize
    $(this).css('text-transform','capitalize');
});

Manifestación

todo mal existe -> variante de fuente: minúsculas;

transformación de texto: capitalizar; solo la primera letra mayúscula