I am currently utilizing Bootstrap 3 for my website, and I have a sentence composed of three parts at a certain point on the page. For example, it might read "Bud Spencer walks with Terence Hill." where X="Bud Spencer", Y="walks with", Z="Terence Hill."
To prevent text wrapping within each of these three parts, I have implemented the following HTML code:
<div class="...">
<span class="text-nowrap">X</span> <span class="text-nowrap">Y</span> <span class="text-nowrap">Z</span>
</div>
My goal is for users to view the complete sentence X Y Z, but if the screen width is insufficient, they should see
X
Y
Z
rather than something like
X Y
Z
In essence, I want to enforce wrapping of all three parts if there is not enough space for them to remain on the same line. How can this be achieved with CSS/Bootstrap?