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/

如何防止文本在插入元素下包装？

1 个答案: