CSS: Wie platziere ich ein Symbol neben Text?

Question

Ich habe ein übergeordnetes div-Element (display: flex) wie dieses, das zwei untergeordnete Elemente enthält

1. Text – ein span-Element
2. (i) icon – ein div-Element

Wenn der Text nur eine Zeile umfasst (keine Zeilenumbrüche), funktioniert alles einwandfrei. Beim Umbruch (2 Zeilen oder mehr) wird die Breite des Elements jedoch basierend auf der breitesten Zeile angepasst

Ich möchte, dass der Text umbrochen wird, wenn er länger ist.

Im obigen Beispiel möchte ich, dass das (i)-Symbol neben NORD steht.

Ich möchte, dass das (i)-Symbol neben NORD steht.

Answer 1

如果您只想让图标始终位于单词“North”旁边，只需将其放在标签内：

.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>