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

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 >
   <div >t</div>
   <div >o</div>
   <div >o</div>
</div>
<div >
   <div >c</div>
   <div >o</div>
   <div >o</div>
   <div >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.

CodePudding user response：

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 >
    <span >t</span>
    <span >o</span>
    <span >o</span>
  </div>
  <div >
    <span >c</span>
    <span >o</span>
    <span >o</span>
    <span >l</span>
  </div>
</div>