Casser le mot pour l'en-tête flexbox transformé - css, flexbox, table de réaction

Exemple: https://codesandbox.io/s/18p67pnp47

Je dois faire pivoter certains en-têtes de colonne dans ma table de réaction. Cela se fait via:

writing-mode: vertical-rl;
transform: rotate(180deg);

Cependant, une partie du texte est excessivement longue etJe voudrais "plafonner la hauteur après la rotation, en séparant les mots en une nouvelle ligne. J'ai essayé divers affichages, largeur min / max, largeur, retour à la ligne, etc." et je ne peux pas tout comprendre.

L'exemple lié ci-dessus montre le problème (le nom doit figurer sur une nouvelle ligne) et inclut tous les balises pertinentes. Des idées?

Réponses:

Vous devez ajouter white-space: normal; à vos css

.rt-resizable-header-content {
white-space: normal;
}