3

Tengo una tabla que realizo una consulta de usuarios, en el cual cada registro tiene un campoo name y naturalmente estan todos los nombres en mayusculas

Ejemplo:

JUAN DOMINGO VARGAS ROSETTI

Quiero poder hacer con el CSS en el frontend que solamente me deje la primera letra de cada nombre en mayúsculas.

Como me gustaria verlo:

Juan Domingo Vargas Rosetti

Como puedo realizar esto?

Estuve probando con el pseudo elemento ::first-letter, pero no doy con la tecla.

Muchas gracias.

Saludos

1
  • 1
    Échale un vistazo a esto stackoverflow.com/questions/3471157/…. Aparentemente no hay manera de hacerlo con CSS, deberás utilizar otros métodos como dentro de PHP (o lo que estés usando, Python, perl, CGI, ASP, etc) o con Javascript. el 12 jul. 2020 a las 18:53

2 respuestas 2

4

Si tu texto va a ocupar una sola línea y no más, se me ocurre un pequeño truco para conseguirlo solamente con CSS, de no ser así deberías hacer uso de Javascript.

Ya que la propiedad text-transform: capitalize afecta solamente a la primera letra de cada palabra (dejando el resto tal como están) la idea es volver primero todas minúsculas para poder posteriormente aplicarle el capitalize.

p {
  text-transform: lowercase;
}

p::first-line {
  text-transform: capitalize;
}
<p>JUAN DOMINGO VARGAS ROSETTI</p>

La magia se encuentra en que mediante el pseudo-elemento ::first-line podemos afectar a parte del <p> por lo que el navegador considera que no estamos sobreescribiendo la propiedad text-transform y nos permite aplicarle ambas transformaciones al mismo elemento.

1
  • Perfecto!: Es lo que necesito. Muchas gracias!! el 12 jul. 2020 a las 19:07
-1

Una respuesta sería hacerlo con php:

Para hacer ejemplo recuerda tener xamp instalado y que el archivo prueba.php esté en la carpeta Disco Local (C:)/xamp/htdocs/Pruebas

    //RECIBIMOS EL TEXTO EN MAYÚSCULA
    $textomayusculas = "ESTA ES UNA PRUEBA PARA CAMBIAR LAS LETRAS";
    //modificamos texto a minúsculas con la función de PHP strtolower()
    $textominusculas = strtolower($textomayusculas);
    //modificamos texto a una mayúscula con la función de PHP ucwords()
    $textounamayuscula = ucwords($textominusculas);

//prueba.php

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Documento sin título</title>

    
</head>
    
    

<body>
    
    
    <?php
        //RECIBIMOS EL TEXTO EN MAYÚSCULA
        $textomayusculas = "ESTA ES UNA PRUEBA PARA CAMBIAR LAS LETRAS";
        //modificamos texto a minúsculas con la función de PHP strtolower()
        $textominusculas = strtolower($textomayusculas);
        //modificamos texto a una mayúscula con la función de PHP ucwords()
        $textounamayuscula = ucwords($textominusculas);
    
    ?>
    
    <div>
        <p><?php echo ucwords($textounamayuscula); ?></p>
    </div>
</body>
</html>
1
  • Gracias por tu contribución, realiza solo una respuesta, si tienes cambios editala, revisa Cómo responder.
    – Jorgesys
    el 13 jul. 2020 a las 1:23

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.