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.