Skip to main content
se añadieron 297 caracteres en el cuerpo
Origen Enlace
phpMyGuel
  • 14.8k
  • 1
  • 22
  • 38

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%;
  height: 100px;
}

.resumen p {
  overflow: hidden;
  white-space: nowrap;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.

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%;
  height: 100px;
}

.resumen p {
  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;
}
<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>

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.

se añadieron 297 caracteres en el cuerpo
Origen Enlace
phpMyGuel
  • 14.8k
  • 1
  • 22
  • 38

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%;
  height: 100px;
}

.resumen p {
  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;
}
<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>

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%;
  height: 100px;
}

.resumen p {
  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;
}
<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>

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%;
  height: 100px;
}

.resumen p {
  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;
}
<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>

Origen Enlace
phpMyGuel
  • 14.8k
  • 1
  • 22
  • 38

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%;
  height: 100px;
}

.resumen p {
  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;
}
<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>