title: Prevent new line after every word in span
body: <p>We are using some code to make a tooltip appear while hovering over text or an icon. Using a <code>transform</code> we are then able to center the tooltip, no matter what size it is, so we can have the size scale with the content of the tooltip: <a href="http://jsfiddle.net/z8wxdjzu/4/" rel="nofollow">http://jsfiddle.net/z8wxdjzu/4/</a></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.position-me {
    margin: 10%;
  }
  .abbr {
    position: relative;
  }
  .tooltip {
    background: orange;
    display: none;
    text-align: center;
    max-width: 100px;
    padding: 3px;
    position: absolute;
    top: 20px;
    left: 50%;
    right: auto;
    -webkit-transform: translate(-50%, 0);
    -ms-transform: translate(-50%, 0);
    transform: translate(-50%, 0%);
  }
  .abbr:hover .tooltip {
    display: inline-block;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="position-me"&gt;
    &lt;span class="abbr"&gt;
      Text
      &lt;span class="tooltip"&gt;Lorem ipsum dolor sit amet.&lt;/span&gt;
    &lt;/span&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>The problem is that even when providing a larger maximum width, a new line is added in the tooltip after every word. Instead we want the tooltip to fill the entire width (provided with <code>max-width</code>) before moving to a second line.</p>
  
  <p>We don't want to set a fixed width, because some tooltips are rather short and we don't want a lot of empty space in the tooltip. How can we prevent the line breaks from happening?</p>
  
  <p>EDIT: The max-width is actually important, since some of the tooltips are long enough to span several lines, so just removing it and using a <code>whitespace: nowrap</code> is going to be insufficient, unless we do manual line breaks, which I'd rather prevent.</p>