0

Tengo un problema con el párrafo, me gustaría que se adapte al tamaño de su div padre tal como lo hace, el problema es que cuando redimensiono las letras se cortan por la mitad. lo que quiero conseguir es que cuando no entre mas texto no se vea, no que se vea la ultima linea cortada por la mitad, como actualmente me esta ocurriendo, os dejo aquí el código

*{
    margin: 0px;
    padding: 0px;
}

body{
    background-color: lightblue;
}

article{
    display: -webkit-box; 
    display: -moz-box;
    display: -ms-flexbox; 
    display: -webkit-flex; 
    display: flex;
    position: relative;
    width: 60%;
    height: 150px;
    background-color: crimson;
    margin: 0 auto;
    margin-top: 150px;
}

div.contenido_evento{
    display: inline-block;
    position: relative;
    width: 100%;
    height: 150px;
    background-color: lightgreen;
    overflow: hidden;
}

div.contenido_evento > h2{
    display: block;
    position: relative;
    width: auto;
    text-align: center;
    padding-top: 10px;
    padding-bottom: 10px;
    background-color: crimson;
}

div.contenido_evento > p{
  font-size: 1.25em;
}
<body>
    <article>
        <div class="contenido_evento">
            
            <h2>TITULO EVENTO</h2>

            <p>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean metus augue, auctor id consectetur ut, pellentesque et nunc. Donec vehicula justo at mauris rhoncus viverra. Morbi eget semper ante, et euismod diam. 
            </p>

        </div>
    </article>

2
  • Solo para aclarar: ¿es ocultar el texto cuando hay overflow, o mostrar de todas maneras el texto?
    – padaleiana
    Commented el 8 jun. 2021 a las 13:53
  • quiero ocultar el texto cuando no entre en el div con overflow: hidden, pero como la ultima linea de texto a veces se corta al no entrar queria saber si hay alguna manera con css de que cuando no entre el texto el div no parta las letras por la mitad
    – solnegro88
    Commented el 8 jun. 2021 a las 14:10

3 respuestas 3

0

Con CSS como tal no es posible detectar la cantidad de texto de un div, para eso tendrás que usar javascript, yo recomendaría usar mejor un height dinámico, que crezca basada en la cantidad de objetos en el elemento, fuera de eso lo mas cercano es usar overflow hidden para ocultar el texto que se sale pero de todas formas veras como se corta.

*{
    margin: 0px;
    padding: 0px;
}

body{
    background-color: lightblue;
}

article{
    display: -webkit-box; 
    display: -moz-box;
    display: -ms-flexbox; 
    display: -webkit-flex; 
    display: flex;
    position: relative;
    width: 60%;
    height: auto;
    background-color: crimson;
    margin: 0 auto;
    margin-top: 150px;
}

div.contenido_evento{
    display: inline-block;
    position: relative;
    width: 100%;
    height: auto;
    background-color: lightgreen;
    overflow: hidden;
}

div.contenido_evento > h2{
    display: block;
    position: relative;
    width: auto;
    text-align: center;
    padding-top: 10px;
    padding-bottom: 10px;
    background-color: crimson;
}

div.contenido_evento > p{
  font-size: 1.25em;
  padding: 10px 15px;
}
<body>
    <article>
        <div class="contenido_evento">
            
            <h2>TITULO EVENTO</h2>

            <p>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean metus augue, auctor id consectetur ut, pellentesque et nunc. Donec vehicula justo at mauris rhoncus viverra. Morbi eget semper ante, et euismod diam. 
            </p>

        </div>
    </article>

2
  • vamos que me toca mirar javascript, verdad??? jajaja. no puedo cambiar el alto del div lo necesito de un tamaño exacto, pensaba ponerle overflow hidden para que cuando no entrase mas texto se cortase, pero en vez de cortarse en la ultima linea que entre bien, me corta la linea a la altura que pille
    – solnegro88
    Commented el 8 jun. 2021 a las 14:15
  • @solnegro88 hay otra forma, puedes intentar usar la fuente no en px, si no en vw por ejemplo, 10vw, que seria el tamaño del viewport, con eso las fuentes nunca se saldrán de la pantalla, el problema es que si la pantalla es muy pequeña la fuente también se hará pequeña o calcula el height con javascript. Commented el 8 jun. 2021 a las 15:21
0

Lo que puedes hacer para solucionar tu problema, es usar un wrapper.

.wrapper {
    -webkit-column-width: 150px; //No puedes usar 100%
    column-width: 150px;
    height: 100%;
}

Acá unos ejemplos del uso, el primero siendo el problema

h2 {
    font-size: 1.3em;
}

.box1 {
    height: 72px;
}

.box {
    margin: 1em;
    border: 1px solid #ccc;
    width: 150px;
    overflow: hidden;
}

.wrapper1 {
    column-width: 150px;
    max-height: 100px;
}

.wrapper2 {
    column-width: 150px;
    max-height: 150px;
}
<div class="box box1">
        <h2>Lorem Impsum</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean metus augue, auctor id consectetur ut, pellentesque et nunc. Donec vehicula justo at mauris rhoncus viverra. Morbi eget semper ante, et euismod diam.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean metus augue, auctor id consectetur ut, pellentesque et nunc. Donec vehicula justo at mauris rhoncus viverra. Morbi eget semper ante, et euismod diam.</p>
</div> 

<div class="box">
    <div class="wrapper1">
        <h2>Lorem Impsum</h2>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean metus augue, auctor id consectetur ut, pellentesque et nunc. Donec vehicula justo at mauris rhoncus viverra. Morbi eget semper ante, et euismod diam.
    </div>
</div> 


<div class="box">
    <div class="wrapper2">
        <h2>Lorem Impsum</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean metus augue, auctor id consectetur ut, pellentesque et nunc. Donec vehicula justo at mauris rhoncus viverra. Morbi eget semper ante, et euismod diam.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean metus augue, auctor id consectetur ut, pellentesque et nunc. Donec vehicula justo at mauris rhoncus viverra. Morbi eget semper ante, et euismod diam.</p>
    </div>
</div> 

0

Digamos que la caja tiene un alto de 100 y cada línea de texto mide 12, si dividimos 100 / 12 = 8.333333, es decir te caben 8 líneas y fracción. Entonces hay que eliminar esa fracción para que quepan un número justo de líneas, y para determinar la fracción a eliminar utilizamos el módulo o resto entero

Explicación matemática:

100 - mod(100,12) = 100 - 4 = 96  // nota: 12 * 8 + 4 =100, por eso mod(100,12) = 4

Ok, ya tenemos la técnica, ¿qué más necesitamos?

  • Obtener el tamaño, para eso usamos calc-size()
  • El padre debe ser display:grid, para que calc-size funcione como queremos. Esto es que no se expanda más allá del overflow
  • Además overflow:hidden para esconder el texto sobrante
  • Y finalmente el line-height

Para el punto del line-height, puede pasar 2 cosas:

  • Que no lo hubiésemos definido, en cuyo caso siempre usaremos 1.2em (este es tu caso). Esto es porque los navegadores agregan un 20% adicional al tamaño de la fuente
  • Que lo hubiésemos definido, en cuyo caso usaremos ese valor

1) Ejemplo, sin definir line-height

.padre{
  display: grid;
}
.hijo{
  height: calc-size(auto, size - mod(size, 1.2em));
  overflow: hidden;
}

2) Ejemplo, con line-height definido

.padre{
  display: grid;
}
.hijo{
  line-height: 1.8; /* ---------------------↓  */
  height: calc-size(auto, size - mod(size, 1.8em));
  overflow: hidden;
}

DEMO:

*{ margin: 0px; padding: 0px;}
body{background-color: lightblue;}

article{
    display: flex;
    position: relative;
    width: 60%;
    height: 150px;
    background-color: crimson;
    margin: 0 auto;
}

div.contenido_evento{
    width: 100%;
    height: 150px;
    background-color: lightgreen;
    overflow: hidden;
    display:grid;
}

div.contenido_evento > h2{
    display: block;
    position: relative;
    width: auto;
    text-align: center;
    padding-top: 10px;
    padding-bottom: 10px;
    background-color: crimson;
}

div.contenido_evento > p{
  font-size: 1.25em;
  height: calc-size(auto, size - mod(size, 1.2em));
  overflow:hidden;
}
<body>
    <article>
        <div class="contenido_evento">
            
            <h2>TITULO EVENTO</h2>

            <p>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean metus augue, auctor id consectetur ut, pellentesque et nunc. Donec vehicula justo atg mauris rhoncus viverra. Morbi eget semper ante, etg euismod diam.       Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean metus augue, auctor id consectetur ut, pellentesque et nunc. Donec vehicula justo atg mauris rhoncus viverra. Morbi eget semper ante, etg euismod diam. 
            </p>

        </div>
    </article>

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.