Usando Flexbox y puntos suspensivos de texto juntos

Puede truncar una sola línea de texto con puntos suspensivos (...) con bastante facilidad con text-overflowalgunos amigos. Pero, como era de esperar, ese truncamiento ocurre al final de la línea de texto. ¿Qué pasa si quieres truncar el contenido a la mitad?

Leonardo Faria detalla buenos casos de uso para esto, como en una ventana del sistema operativo que enumera archivos. La línea de texto es un nombre de archivo y una extensión de archivo. Cuando esa línea se trunca, trunca solo el nombre, dejando siempre la extensión al final. El truco es un padre de flexbox, por lo que puede usar el desbordamiento solo en la parte del nombre del archivo, pero debe asegurarse de restablecer min-widthel valor natural que existe min-content, lo que evita el truncamiento que resulta confuso.

Enlace directo →