Hacer el primer caracter en mayúscula en CSS

255

¿Hay alguna manera de hacer que el primer carácter sea mayúscula en una etiqueta en CSS?

Aquí está mi HTML:

<a class="m_title" href="">gorr</a>
<a class="m_title" href="">trro</a>
<a class="m_title" href="">krro</a>
<a class="m_title" href="">yrro</a>
<a class="m_title" href="">gwwr</a>
Expandir fragmento

css disfruta la vida
fuente
2
Para especificar: el primer carácter y SOLO el primero. Que hace que el text-transform: capitalize;no es suficiente cuando se tiene varias palabras
wiktus239

Respuestas:

623

Hay una propiedad para eso:

a.m_title {
    text-transform: capitalize;
}

Si sus enlaces pueden contener varias palabras y solo desea que la primera letra de la primera palabra sea mayúscula, use :first-letteren su lugar una transformación diferente (aunque en realidad no importa). Nota que para que :first-letterfuncione sus aelementos necesitan ser contenedores de bloque (que puede ser display: block, display: inline-blocko cualquiera de una variedad de otras combinaciones de una o más propiedades):

a.m_title {
    display: block;
}

a.m_title:first-letter {
    text-transform: uppercase;
}
BoltClock
fuente
3
@alanjds: Sí, funciona en todas las versiones de IE que admiten CSS. Es una tecnología muy antigua.
BoltClock
3
es posible que desee utilizar un punto y coma doble, consulte css-tricks.com/almanac/selectors/f/first-letter
ndequeker
55
@Voles: claro, si no necesita admitir IE8 y versiones anteriores. No digo que no podrías usar dos puntos dobles si quisieras. (Por lo que vale, en el momento de esta respuesta que se publicó hace 2 años y medio, mi política personal era admitir IE8 de forma predeterminada. Hoy ya no lo hago).
BoltClock
1
Tenga en cuenta que si el display: blockrequisito (quién sabe por qué) lo dificulta, :first-lettertambién funciona display: inline-block.
Mitya
1
@Henry Garcia De Guzman: Porque eso pone todo en mayúscula, no solo la primera letra (de cada palabra u oración o lo que sea).
BoltClock
55

Tenga en cuenta que el ::first-letterselector no funciona con elementos en línea, por lo que debe ser blocko inline-block, como sigue:

.m_title {display:inline-block}
.m_title:first-letter {text-transform: uppercase}
Logus
fuente
1
En mi caso, todo el texto ya estaba en mayúsculas, así que tuve que agregar text-transform: minúsculas a .m_title y ahora funciona perfectamente.
Hjuster
15

Sugiero usar

#selector {
    text-transform: capitalize;
}

o

#selector::first-letter {
    text-transform: uppercase;
}

Por cierto, consulte este enlace de w3schools: http://www.w3schools.com/cssref/pr_text_text-transform.asp

Maurizio Battaghini
fuente
2
Buena respuesta, pero definitivamente no es un enlace a la documentación de w3c.
Stephan
1
Hola, tenga en cuenta: la transformación de texto 'inicial' no significa 'poner en mayúscula la primera letra'. Más bien, significa 'volver al valor predeterminado inicial para esta propiedad'.
Marcos Buarque
Gracias, he aplicado las dos soluciones recomendadas.
Marcos Buarque
5

Primero en minúscula:

.m_title {text-transform: lowercase}

Luego conviértalo en la primera letra mayúscula:

.m_title:first-letter {text-transform: uppercase}

"text-transform: capitalize" funciona para una palabra; pero si quieres usar para oraciones esta solución es perfecta.

OzgurG
fuente
2
: la primera letra no funciona con inlineelementos, establezca display:inline-blocksi este es su caso. ( stackoverflow.com/questions/7631722/… )
Fanky
1 
<script type="text/javascript">
     $(document).ready(function() {
     var asdf = $('.capsf').text();

    $('.capsf').text(asdf.toLowerCase());
     });
     </script>
<div style="text-transform: capitalize;"  class="capsf">sd GJHGJ GJHgjh gh hghhjk ku</div>
Gnana Sekar
fuente
es trabajarme concepto ... párrafo cada palabra en la pantalla mayúsculas de la primera letra
Gnana Sekar
-2

Le recomendaría que use el siguiente código en CSS:

    text-transform:uppercase;

Asegúrate de ponerlo en tu clase.

Kevin Davis
fuente