title: Word wrapping in Bootstrap - one or three lines
body: <p>I'm using Bootstrap 3, and at some point in my page I have a sentence "X Y Z" made of three parts. For instance, it could be "Bud Spencer walks with Terence Hill." where X="Bud Spencer", Y="walks with", Z="Terence Hill."</p>
  
  <p>I want to avoid text wrapping in each of the three parts, so I have the following HTML code:</p>
  
  <pre><code>&lt;div class="..."&gt;
      &lt;span class="text-nowrap"&gt;X&lt;/span&gt; &lt;span class="text-nowrap"&gt;Y&lt;/span&gt; &lt;span class="text-nowrap"&gt;Z&lt;/span&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Ideally I want the users to see the unbroken sentence <code>X Y Z</code>, but if the screen is not wide enough I want them to see</p>
  
  <pre><code>X
  Y
  Z
  </code></pre>
  
  <p>and not, for instance</p>
  
  <pre><code>X Y
  Z
  </code></pre>
  
  <p>In other words, I want to force a wrap of all the three parts in case there isn't enough space for them to stay on the same line.
  How can I do it with CSS/Bootstrap?</p>