1

Estoy realizando un programa que me muestra información de aprendices. El problema es que hay programas a los que estos aprendices pertenecen, que su nombres es muy largo; al ser demasiado largo, se tiene que cortar, porque el contenedor (que no se estira más) no es suficiente para eso:

introducir la descripción de la imagen aquí

Este sería el ejemplo de cómo se ve. Se nota que la palabra 'información' se sale del cuadro. Aún así, el texto está con padding y no debería verse ta "apretado". Quisiera saber cómo ajustar automáticamente el texto (que son llamados a bases de datos) al contenedor, que cambie el tamaño y se vea bien sin importar los caracteres que hayan.

1
  • consulta, estas cajas contenedoras que tienes, tienen un alto definido? y el los traes usando php u algún otro framework? Commented el 10 abr. 2019 a las 19:34

2 respuestas 2

4

Una solución sería utilizar text-overflow: ellipsis;. Después al pasar con el ratón por encima del div puedes hacer algo como div p:hover{white-space: normal;} o div p:hover{overflow: visible;}

div {
  width:300px;
  border:1px solid;
  padding:1em;
  }
div p{  
  white-space: nowrap; 
  overflow: hidden;
  text-overflow: ellipsis;
}

div p:hover{white-space: normal;}
<div><p>Estoy realizando un programa que me muestra información de aprendices.</p></div>

0

te pongo un código de ejemplo en el cual tengo dos cajas, a la primera le di un alto y ancho definidos, si este div tiene muchas palabras se va a desbordar. Pero si te fijas en la segunda caja, esta lo único que tiene definido es un width, no le definí alto por lo que si sigo escribiendo en él la caja va a crecer hacia abajo

.caja{
        width: 400px;
        background: green;
        padding: 5px;
        height: 100px;
    }
    .espacio{
        height: 150px;
    }
    .caja2{
        width: 400px;
        background: green;
        padding: 5px;
    }
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <title>VUEjs</title>
</head>

<body>
    
    <div class="container">
        <div class="row">
            <div class="caja">
                <h2>
                    Un título ostentoso y de grandes palabras utilizadas y más cosas importantes
                </h2>
            </div>
        </div>
        <div class="espacio"></div>
        <div class="row">
            <div class="caja2">
                    <h2>
                        Un título ostentozo y de grandes palabras utilizadas y más cosas importantes y más cosas locas
                    </h2>
            </div>
        </div>
    </div>

</body>
</html>

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.