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 thomas</a>，或在元素上使用CSS设置white-space: nowrap，或在<nobr>...</nobr>内包装内容。

Answer 2

添加display:block

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

<强> DEMO

新行分隔div内的单词

2 个答案: