Przenoszenie diva do następnej linii w monecie kiedy jest koniec wyrazu

Mam taki problem mam sobie stronę i pod każdym divem jest ukryta litera i to wygląda tak link

<div id="word">
<div class="char">&nbsp;</div>
<div class="char">&nbsp;</div>
<div class="char">&nbsp;</div>
<div class="char">&nbsp;</div>
<div class="char">&nbsp;</div>
<div class="char">&nbsp;</div>
<div class="char">&nbsp;</div>
<div class="char">&nbsp;</div>
<div class="char">&nbsp;</div>
<div class="empty">&nbsp;</div>
<div class="char">&nbsp;</div>
<div class="char">&nbsp;</div>
<div class="char">&nbsp;</div>
<div class="char">&nbsp;</div>
<div class="char">&nbsp;</div>
<div class="empty">&nbsp;</div>
<div class="char">&nbsp;</div>
<div class="char">&nbsp;</div>
<div class="char">&nbsp;</div>
<div class="char">&nbsp;</div>
<div class="char">&nbsp;</div>
<div class="char">&nbsp;</div>
<div class="char">&nbsp;</div>
</div>

Dałem tylko fragment kodu za to odpowiedzialny i chodzi o, że w tym przypadku przy tej rozdzialczości przenosi do nastepnej linii jak się skończy miejsce kolejnego diva char a mi chodzi, że ma przenosić do nastepnej linii jak niestarczy miejsca na ten wyraz nie ma go dzielić na pół czyli jedna część w pierwszej linii i nastepna w drugiej jak to zrobić ?

{word-wrap:no-wrap}.

Nie mi chodzi o cięcie divów, które zawierają literę a nie tekstu.

Napisz {width:100%, overflow:auto}.

Może każde słowo opakuj osobnym divem?

Zachowanie które opisujesz istnieje, i nazywa się display:inline. Tak działa każdy tekst na stronie.

Zamiast w <div>, wsadź te elementy w jakiś tag inline, np <span>, i wtedy to się zrobi "samo":

<span class="char">
  k
</span><span class="char">
  o
</span><span class="char">
  t
</span>

Tylko pomiędzy znacznikami nie może być spacji ani innego whitespace'a, bo wtedy zostaną potraktowane jako osobne słowa.

może w połączeniu z word-wrap <wbr /> ci pomoże?