html - 如何防止文本在插入的元素下换行？

Question

我正在使用现有的标记，其中我几乎无法更改(场景 1)
JSFiddle .

.container {
  width: 340px;
  border: 1px solid yellow;
  margin-bottom: 20px;
}

.title a {
  font: 32px/normal 'Segoe UI Light', Arial;
  line-height: 1.2em;
  text-decoration: none;
  color: #606060;
}

span.bb {
  border: 1px solid red;
  width: 30px;
  height: 30px;
  margin-right: 12px;
  display: inline-block;
  cursor: pointer;
  vertical-align: bottom;
}

<div class="container">
  <h2 class="title">
    <!-- following span tag is added at runtime -->
    <span class="bb"></span>
    <a href="http://test.com" target="_blank">  
                Lorem ipsum dolor sit amet, consectetur  
                adipisicing elit  
            </a>
  </h2>
</div>

我想插入一个固定大小的 span 标签，只要现有文本适合一行(场景 2)，它就可以很好地工作。如果现有文本跨越多行，它会换行到我插入的 span 标签下(场景 3)。

我想防止文本在 span 标签下换行，并希望后续行与句子的第一个单词对齐。

我尝试了几种方法，但没有在不失去包装能力或破坏现有场景的情况下得到非常正确的解决方案。

我更喜欢 CSS 解决方案来解决这个布局问题。

Answer 1

我通过添加以下附加样式来实现此功能

span.bb {
    float:left;
}

span.bb + a {
    display: block;
    margin-left: 42px;    
}

http://jsfiddle.net/anunay/3bqLq/