Luis Isasi

Para comenzar, usaremos 3 propiedades CSS(no vamos a profundizar en estas propiedades pero dejaré lo enlaces en cssreference.io por si no las conoces).

white-space

Nos permite manejar los espacios en blanco con los siguientes valores:

• normal(default): El contenido del texto está envuelto.
• nowrap: Coloca el texto en forma lineal sin saltos de líneas y sobrepasando al contenedor si es necesario(de ahí el nombre 'nowrap' es decir 'sin envoltura').
• pre: simula a la etiqueta pre en HTML.

Hay 2 valores más pre-wrap y pre-line, te los dejo para que los investigues.

overflow

Básicamente define como mostrar el contenido desbordado, dependiendo de esto también el scroll en el contenedor (valores: visible(default), hidden, scroll y auto).

text-overflow

Define como se comporta el texto desbordado.

• clip(default): El texto no tiene envoltura y estará recortado si se desborda.
• ellipsis: si el texto desbordado se recortará con puntos suspensivos al final.

Ahora que ya conoces como trabajan las 3 propiedades CSS que utilizaremos, vamos a por el código css.

jsx
<p id="parrafo">
  Lorem Ipsum is simply dummy text of the printing and typesetting industry.
  Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,
  when an unknown printer took a galley of type and scrambled it to make a type
  specimen book. It has survived not only five centuries, but also the leap into
  electronic typesetting, remaining essentially unchanged. It was popularised in
  the 1960s with the release of Letraset sheets containing Lorem Ipsum passages,
  and more recently with desktop publishing software like Aldus PageMaker
  including versions of Lorem Ipsum.
</p>

Ya que tenemos un párrafo con su id, agregamos los siguientes propiedades css.

css
#parrafo {
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

Con white-space hacemos que el texto sea lineal con la intención que se desborde, luego con overflow escondemos el texto desbordado, finalmente con text-overflow agregamos los puntos suspensivos.

El resultado sería:

Gracias por leer.