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** <!-- begin snippet: js hide: false console: true babel: false --> <!-- language: lang-css --> .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; } <!-- language: lang-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> <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> <!-- end snippet --> **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.