CSS : Comment placer une icône à côté du texte ?

Question

J'ai un élément div parent comme celui-ci (affichage : flex), contenant deux éléments enfants

1. Texte - un élément span
Icône
2. (i) - un élément div

Lorsque le texte ne comporte qu'une seule ligne (sans saut de ligne), tout fonctionne correctement. Cependant, lorsqu'il s'enroule (2 lignes ou plus), la largeur de l'élément s'ajustera en fonction de la ligne la plus large

Je souhaite que le texte soit renvoyé à la ligne lorsqu'il est plus long.

Dans l'exemple ci-dessus, je souhaite que l'icône (i) soit à côté de NORD.

Je veux que l'icône (i) soit à côté de NORD.

Answer 1

Si vous souhaitez simplement que l'icône soit toujours à côté du mot "Nord", placez-la simplement dans la balise  :

.flex
{
  display:flex;
  align-items:center;
  resize: both;
  overflow:auto;
  background: #99AAAA;
  max-width: fit-content;
   max-height: fit-content;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css" rel="stylesheet"/>
<h3>拖动角落进行调整大小</h3> 
<div class="flex">
  <span>THE KING OF THE NORTH <i class="fa-solid fa-image"></i></span>
  </div>