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;
}