7

Estoy tratando de colocar un texto que viene en MAYÚSCULAS con la primera letra mayúscula y las otras minúsculas, el texto no se puede modificar por js ni por html.

¿Existe hay alguna forma con CSS de hacer esto posible?

.let p {
    text-transform: lowercase;
}
<div class="let">
    <p>ESTO ES UNA INFORMACION QUE NECESITO QUE SEA LA PRIMERA LETRA MAYUSCULA Y LAS OTRAS MINUSCULAS</p>
</div>

6 respuestas 6

10

Deberías pasar el texto a minúscula y luego poner la primera letra como mayúscula utilizando el siguiente selector CSS: :first-letter.

Quedando de la siguiente manera:

.let p {
    text-transform: lowercase;
}

.let p:first-letter {
    text-transform: uppercase;
}
<div class="let">
    <p>ESTO ES UNA INFORMACION QUE NECESITO QUE SEA LA PRIMERA LETRA MAYUSCULA Y LAS OTRAS MINUSCULAS</p>
</div>

1
  • Muchas gracias por tu respuesta me fue útil y resolvió mi problema.
    – zerokira
    Commented el 3 sept. 2018 a las 17:14
6

Primero conviertes en minúsculas todo el párrafo.

.let p {
text-transform: lowercase;
}

Después aplicas el uppercase sólo a la primera letra.

.let p::first-letter {
    text-transform: uppercase;
}
1
  • 1
    Muchas gracias por tu respuesta, no esta mal me fue útil.
    – zerokira
    Commented el 3 sept. 2018 a las 17:13
2

lowercase: muestra todo el texto del elemento con letras minúsculas.

uppercase: muestra todo el texto del elemento con letras mayúsculas.

capitalize: muestra la primera letra de cada palabra en mayúscula y el resto de letras en minúsculas.

none: muestra el texto tal y como está escrito, respetando todas las mayúsculas y minúsculas.

4
  • no me sirve esta respuesta, ya he investigado...
    – zerokira
    Commented el 3 sept. 2018 a las 17:00
  • none: muestra el texto tal y como está escrito, respetando todas las mayúsculas y minúsculas. Utilizando esta forma te debería de funcionar.
    – Oswuell
    Commented el 3 sept. 2018 a las 17:01
  • Yo también concuerdo con Oswuel debería funcionar con w3schools.com/cssref/pr_text_text-transform.asp Commented el 3 sept. 2018 a las 17:09
  • Si el texto que pone originalmente está todo en mayúsculas, transform: none, va a mostrar todo en mayúsculas... Commented el 3 sept. 2018 a las 17:46
1

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

.let p:not(first-letter) {
    text-transform: lowercase;
}
<div class="let">
    <p>ESTO ES UNA INFORMACION QUE NECESITO QUE SEA LA PRIMERA LETRA MAYUSCULA Y LAS OTRAS MINUSCULAS</p>
</div

1
text-transform: capitalize !important;
0

Puedes hacer que la etiqueta

coja el elemento con los pseudo-elementos, también te puedo recomendar visitar el sitio de www.w3schools.com donde encontraras todos los ejemplos que puedas necesitar sobre paginas web. Aquí tienes 2 ejemplos para la etiqueta

:

p::first-letter {
    color: #ff0000;
    font-size: xx-large;
}

p::first-line {
    color: #0000ff;
    font-variant: small-caps;
}

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.