Yerson
Zurvin Blog

Zurvin Blog

CSS: Recortar texto cuando supera un ancho máximo

Yerson's photo
Yerson
·Oct 27, 2021·

1 min read

Subscribe to my newsletter and never miss my upcoming articles

El problema propuesto en BFE.dev es recortar el texto usando '...' cuando el texto supera el ancho 300px del contenedor.

image.png

El código HTML:

<div class="one-line">
   Hi, this is fairly long piece of text from BFE ipsum dolot is simple text
</div>

CSS:

.one-line {
  width: 300px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
 
Share this