css - div内の単語を区切る改行

Question

基本的に、divに2つのタグがあり、それらは変更可能です。しかし、それらが複数の単語である場合、または単に文字が多い単語である場合は、改行が必要なときにそれらを分離したくありません。私はこのデモを持っており、考えられる結果のいくつかを書き留めました。最初のdivは、私が防ぎたい今起こっていることです。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

通常のスペースの代わりにノーブレークスペースを<a>hi&nbsp;thomas</a>使用するか、要素のCSS設定white-space: nowrapを使用するか、コンテンツをでラップします<nobr>...</nobr>。

Answer 2

追加display:block

a:last-child, span:last-child{display:block}

デモ