2

Me encuentro desarrollando un apartado de la página que consta de tarjetas que contienen una imagen de cabecera y un pequeño resumen sobre el contenido debajo. Quiero que el resumen de abajo tenga un ancho y largo especifico y que si se produce overflow me añada una ellipsis. Hasta ahora he conseguido que se oculte el texto que sobresale pero no me añade la ellipsis.

Adjunto código

CODIGO HTML

<div class="articulo">
                <div class="imagen"></div>
                <div class="resumen">
                    <h3>Título</h3>
                    <p>
                        Lorem ipsum dolor sit amet consectetur adipisicing elit. Deleniti alias ducimus eius ad
                        facere,
                        quidem optio odio, illo odit, nobis magnam quo natus? Corporis obcaecati natus quas expedita
                        eius
                        minus!
                    </p>
                </div>
                <a href="#">Ver más</a>
            </div>

CODIGO CSS:

    .articulo{
        background-color: white;
        margin: 4%;
    }

    .resumen{
    width: 380px;
    margin: -6% 2% 2% 2%;
    height: 100px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}


    .articulo:hover{
        cursor: pointer;
    }

    .imagen{
        background: url(../img/prueba.png);
        background-repeat: no-repeat;
        background-size: 100% 80%;
        height: 200px;
    }
1
  • Editada mi respuesta para contemplar que se corte el texto solamente de cada línea del párrafo que exceda el límite, no de todo el párrafo.
    – phpMyGuel
    Commented el 26 ene. 2020 a las 11:27

1 respuesta 1

2

Ya que lo que se busca es que el texto, al superar a su contenedor, sea el que se corte y muestre una elipsis, es al párrafo (que es el contenedor del texto) al que debemos darle las propiedades:

CSS

.resumen p {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

Ejemplo

.articulo {
  background-color: white;
  margin: 4%;
}
        
.resumen{
  width: 380px;
  margin: -6% 2% 2% 2%;
}

.resumen p {
  overflow: hidden;
  white-space: pre;
  text-overflow: ellipsis;
}
        
.articulo:hover{
  cursor: pointer;
}
        
.imagen{
  background: url(../img/prueba.png);
  background-repeat: no-repeat;
  background-size: 100% 80%;
  height: 200px;
}
<div class="articulo">
  <div class="imagen"></div>
  <div class="resumen">
    <h3>Título</h3>
      <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Deleniti alias ducimus eius ad
        facere,
        quidem optio odio, illo odit, nobis magnam quo natus? Corporis obcaecati natus quas expedita
        eius
        minus!
      </p>
      <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Deleniti alias ducimus eius ad
        facere,
        quidem optio odio, illo odit, nobis magnam quo natus? Corporis obcaecati natus quas expedita
        eius
        minus!
      </p>
  </div>
  <a href="#">Ver más</a>
</div>

Editado

Con white-space: nowrap lo que provocas es que los saltos de líneas que tienes dentro del <p> no sean interpretados, mostrando todo el contenido en una sola línea. Usando white-space: pre; conseguirías lo que creo que pretendes alcanzar.

1
  • Efectivamente de esa manera aparece la ellipsis. No obstante el contenido del párrafo solo muestra una línea de texto. No rellena el heigth que le asigno al párrafo.
    – Alexander
    Commented el 26 ene. 2020 a las 11:08

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.