CODEWITHSUNDEEP
htmlcss
Toma
Toma

Reputation: 2936

Break on words when all letters are inline-block spans

Let's say I have a text and every letter is a span with display: inline-block;:

<div>
  <span class="item">A</span>
  <span class="item">A</span>
  <span class="item">A</span>
  <span class="item">&nbsp;</span>
  <span class="item">A</span>
  <span class="item">B</span>
  <span class="item">C</span>
  <span class="item">&nbsp;</span>
  <span class="item">A</span>
  <span class="item">B</span>
  <span class="item">C</span>
  <span class="item">D</span>
  <span class="item">E</span>
  <span class="item">F</span>
  <span class="item">&nbsp;</span>
  <span class="item">A</span>
  <span class="item">B</span>
</div>

.item {
  display: inline-block;
  font-size: 70px;
}

By default, if the screen is viewport is smaller it will break on any letter. I would like to break on spaces, but without removing the inline-block as I need it for something else

Upvotes: 0

Views: 64

Answers (1)

ajarrow
ajarrow

Reputation: 484

Here is a solution with the text inside div elements and the following CSS added:

#wrapper {
  display: flex;
  flex-wrap: wrap;
}
.text-wrapper {
  display: flex;
}

Demo:

#wrapper {
  display: flex;
  flex-wrap: wrap;
}
.text-wrapper {
  display: flex;
}
.item {
  display: inline-block;
  font-size: 70px;
}
<div id="wrapper">
  <div class="text-wrapper">
    <span class="item">A</span>
    <span class="item">A</span>
    <span class="item">A</span>
    <span class="item">&nbsp;</span>
  </div>
  <div class="text-wrapper">
    <span class="item">A</span>
    <span class="item">B</span>
    <span class="item">C</span>
    <span class="item">&nbsp;</span>
  </div>
  <div class="text-wrapper">
    <span class="item">A</span>
    <span class="item">B</span>
    <span class="item">C</span>
    <span class="item">D</span>
    <span class="item">E</span>
    <span class="item">F</span>
    <span class="item">&nbsp;</span>
  </div>
  <div class="text-wrapper">
    <span class="item">A</span>
    <span class="item">B</span>
  </div>
</div>

Upvotes: 1

Related Questions