Impossible de casser le texte sur un trait d'union dans un élément flottant

L'image suivante montre comment j'aimerais qu'un ensemble d'éléments imbriqués apparaisse.

mise en page souhaitée

Cependant, les éléments apparaissent en fait comme ceci...

entrez la description de l'image ici

J'ai essayé de définir diverses options overflowet white-spacemais je n'arrive pas à obtenir ce que j'espère. Ma meilleure hypothèse est que le floatfait que l'élément entouré de bleu n'a pas de largeur et, par conséquent, il n'y a aucune raison de casser le texte.

Comment puis-je réparer cela?


Solution du problème

Si le nom de famille de la personne est long sans espace, l'élément bordé de bleu ne peut pas tenir au même niveau que l'élément de gauche.

Pour que l'élément à bordure bleue s'adapte au même niveau que l'élément de gauche, vous devez lui donner une certaine largeur avec la propriété word-break.

<div style="width:25%;background:#ccc;float:left;word-break:break-word">
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
</div>
<div style="width:74%;background:#ccc;float:left;margin-left:1%;word-break:break-word">
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
</div>

Commentaires

Posts les plus consultés de ce blog

La fonction GCP Cloud pour écrire des données dans BigQuery s'exécute avec succès, mais les données n'apparaissent pas dans la table BigQuery

Erreur Symfony : "Une exception a été levée lors du rendu d'un modèle"

Le shell POSIX (sh) redirige stderr vers stdout et capture stderr et stdout dans des variables