在他们的行中将文本包装在两个跨度中答案

【问题标题】：wrapping text in two spans in their lines在他们的行中将文本包装在两个跨度中
【发布时间】：2013-11-07 22:48:46
【问题描述】：

我在一个 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 的 span，但它似乎不适用于 IE。

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

谢谢，

【问题讨论】：

标签： css html

【解决方案1】：

我认为 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】：

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

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

【讨论】：