将文本包装在两行中

Question

我在div中有两个跨度

<div>
  <span class="span1">  text 1 text1 <span>
  <span class="span2"> text2 is a long text text2 is a long text text2 is a long text <span>
<div>

现在我希望span2中的文本从span2开始的位置开始，而不是在span 1本身

所以它不应该像

   text1 text1 text2 is a long text 
   text2 is a long text text2 is a long text 

我希望它是

   text1 text2 is a long text 
   text1 text2 is a long text text2 is a long text 

我怎么可能实现这一目标。我已尝试使用属性显示的跨度：阻止，但它似乎不适用于IE。

另外我不想要两个单独的div，因为我希望两个跨度上的背景颜色都是相同的高度，因为span2的高度是可变的，所以两个跨度上的背景颜色高度都不一致。

谢谢，

Answer 1

span {float:left;clear:both;border:1px solid red}

请参阅：http://jsfiddle.net/xAFf5/

这不是你想要的，并且真的想要“拆分”你的跨度来修剪文本的某些部分然后在另一个设计中重新渲染它们::你将需要使用正则表达式操作的javascript

Answer 2

我认为OP试图沟通的仅仅是他/她希望每个跨度都在一个新线上呈现。如果我是正确的，那么以下将是有效的。

关闭您的span和div代码：

<div>
    <span class="span1">span 1 content </span>
    <span class="span2">span 2 content</span>
</div>

制作display:block

.span1, .span2 {display:block;} 

http://jsfiddle.net/waMM2/

---

FWIW，除非您需要跨度具有不同的类名，否则最好给它们相同的类名。 E.G：

<div>
    <span class="block">span 1 content </span>
    <span class="block">span 2 content</span>
</div>

CSS：.block {display:block;}

或者可能适合定位特定div的所有子跨度：

<div class="blockspans">
    <span>span 1 content</span>
    <span>span 2 content</span>
</div>

CSS：.blockspans span {display:block;}