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

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

34

CSS: Selector de primera letra

o:

text-transform: capitalize;

— Amr Elgarhy
fuente

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