css - 在他们的行中将文本包装在两个跨度中

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

我怎么可能做到这一点。我尝试过使用属性 display:block 的跨度，但它似乎不适用于 IE。

此外，我不想有两个单独的 div，因为我希望两个跨度上的背景颜色具有相同的高度，并且由于 span2 的高度是可变的，因此我无法在两个跨度上的背景颜色高度保持一致。

谢谢，

score 0 · Accepted Answer

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

这不是您想要的，并且真正想要“拆分”您的跨度以修剪文本的某些部分，然后以另一种设计重新呈现它们：您将不得不使用正则表达式操作的 javascript

score 0 · Accepted Answer

我认为 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;}

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

<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;}

2 回答 2