打破换行符而不是交叉或推动右浮动div？

Question

如何将跨度的文本（从左侧变量位置开始）推到换行符，以便它尊重一组固定的右浮动div的空间？

我需要确保span带有文本“这一个需要打破...”打破到换行符，而不是将其右侧的固定宽度div推到下一行。 由于它位于树内，因此跨度的left是可变的，层次结构内部越深，总宽度越小。

解决方案必须适用于IE8。

HTML：

<li>
    <div>+</div>
    <div class="icon">
        <span class="nodetext">THIS ONE NEEDS TO BREAK BEFORE NEXT SPAN (Orange line)</span>
        <span class='tree'>
             <div>FIXED</div>
             <div>40px</div>
             <div>FOR</div>
             <div>THESE</div>
        </span>
    </div>
</li>

CSS：

.tree
{   
    position:relative;
    float:right;
}

.tree div
{
   float: left;
   width: 40px;
}

span.nodetext
{
    /* 
       How to respect the orange line boundary?
    */
}

一张图片是......

我也做了JSFiddle。 这是不正确的行为：只有右列（“结果”和“CSS”）足够宽才能显示正确。如果右列太小，则结果全部搞砸了。 （CSS在小提琴中也不是100％正确：由于边距/填充而没有固定橙色线 - 我试图使其更清晰是什么）

Answer 1

我不想这么说......但是在桌子上这样做更好。除非您想使用jQuery跳转DIV，否则获取宽度，并将其放在上面的跨度上。或者你可以从制作DIV列而不是行开始考虑它。