Estoy tratando de mostrar 3 elementos DOM seguidos. El primero y el tercero son div s con width y height constantes, el del medio es texto y puede crecer. La altura de 1 y 3 tiene que ser igual a la altura de una sola línea de texto.

El problema comienza cuando el elemento de texto crece. Me gustaría mostrar 1 antes de la primera línea de texto y 3 justo donde termina el texto.

La combinación de dos cambios me ayudó a lograr esto:

1. Configuré flex-wrap: wrap para parentContainer

 .parentContainer { display: flex; flex-direction: row; flex-wrap: wrap; }

2. Envolví cada palabra en su propio <span>...</span>

Aunque este enfoque muestra los elementos correctamente, tengo dos problemas con él

1. En lugar de usar el algoritmo de salto de línea Unicode, tengo que dividir el texto en palabras yo mismo. Desafortunadamente, no se garantiza que el texto tenga espacios en blanco.

2. El doble clic del mouse solo selecciona texto dentro de un solo lapso en lugar de todo el texto.

Me pregunto si hay un enfoque diferente que no sea propenso a los problemas descritos anteriormente.