CSS: Group divs as a "word" for responsive line breaks

March 19, 2022

I’m trying to figure out a way to group divs as "words" that will float as a series and line break depending on the width of the container. So the HTML looks like this:

<div class="word">
   <div class="letter">t</div>
   <div class="letter">o</div>
   <div class="letter">o</div>
</div>
<div class="word">
   <div class="letter">c</div>
   <div class="letter">o</div>
   <div class="letter">o</div>
   <div class="letter">l</div>
</div>

So if the container allowed it, you would see "too cool" on one line, but if the container was too small, "cool" would appear on the next "line." I can’t figure out what CSS will group the letters so they don’t break and roll to the next line.

Totally open to using Bootstrap if it helps.

>Solution :

It makes more sense to me to replace the div’s with class letter to spans

.word {
  display: inline-block;  
  white-space:nowrap;
}

#container {  
  width:9%;
  border:solid 1px green;
}

<div id='container'>
  <div class="word">
    <span class="letter">t</span>
    <span class="letter">o</span>
    <span class="letter">o</span>
  </div>
  <div class="word">
    <span class="letter">c</span>
    <span class="letter">o</span>
    <span class="letter">o</span>
    <span class="letter">l</span>
  </div>
</div>