Question

Basically, i have two a tags in my div, and they are changeable. but if they are more than one word, or just words with more letters, i don’t want them to get separated when new-line needed. i have this demo where i wrote down some of the possible outcomes. First div is what happens now which i want to prevent. http://jsfiddle.net/tVC43/1/

  <div class="box">
   welcome to <a>xxx</a> part.
  <a>hi thomas</a>
  </div>
  <div class="box" style="left:170px;">
   welcome to <a>xxx</a> part.
  <a style="display:block;">hi thomas</a>
  </div>
  <div class="box" style="left:340px;">
   welcome to <a>xxxxxxx</a> part.
  <a>hi thomas</a>
  </div>

Answer 1

Use a no-break space instead of a normal space, e.g. <a>hi&nbsp;thomas</a>, or use the CSS setting white-space: nowrap on the element, or wrap content inside <nobr>...</nobr>.