新行分隔div內的單詞

Question

基本上，我的div中有兩個標簽，它們是可變的。 但如果它們不止一個單詞，或者只是單詞中包含更多字母，我不希望它們在需要換行時分開。 我有這個演示，我寫下了一些可能的結果。 第一個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>包裝內容<nobr>...</nobr> 。

Answer 2

添加display:block

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

DEMO