CSS: Recortar texto cuando supera un ancho máximo

·

1 min read

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