1

如何将跨度（从可变左侧位置开始）的文本推送到换行符，以便它尊重一组固定右浮动 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。这是不正确的行为：只有当右列（带有“Result”和“CSS”）足够宽时，显示才会正确。如果右列太小，那么结果就会一团糟。（小提琴中的 CSS 也不是 100% 正确：由于边距/填充，橙色线不固定 - 我添加它是为了更清楚地说明什么是什么）

4

1 回答 1

0

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

于 2013-05-06T13:12:01.037 回答