How to prevent wrapping of span or div with CSS?

Sometimes, we want to prevent wrapping of span or div with CSS.

In this article, we’ll look at how to prevent wrapping of span or div with CSS.

How to prevent wrapping of span or div with CSS?

To prevent wrapping of span or div with CSS, we set the white-space property.

For instance, we write

<div class="slideContainer">
  <span class="slide">Some content</span>
  <span class="slide">More content. Lorem ipsum dolor sit amet.</span>
  <span class="slide">Even more content!</span>
</div>

to add some divs.

Then we write

.slideContainer {
  overflow-x: scroll;
  white-space: nowrap;
}

.slide {
  display: inline-block;
  width: 600px;
  white-space: normal;
}

to add white-space: nowrap; to make the div’s contents display all in 1 line.

We add overflow-x: scroll; to make the div horizontally scrollable.

Conclusion

To prevent wrapping of span or div with CSS, we set the white-space property.