將跨度換成換行符而不是跨越或推入正確的浮動div？

如何將跨度的文本（從變量左側的位置開始）移動到換行符，以便它尊重一組固定右側浮動div的空間？將跨度換成換行符而不是跨越或推入正確的浮動div？

我需要確保span與文本「這一個需要休息...」打破新行，而不是將它的固定寬度的權利推到下一行。由於這是在一棵樹內，所以跨度的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％正確的：由於邊距/襯墊，橙色線不是固定的 - 爲了使它更清晰，我添加了什麼）

來源

2013-05-06 Laoujin

那你爲什麼不把寬度設置爲「span.nodetext」元素？ – drip 2013-05-06 11:33:02

寬度取決於我們在樹中的位置。 – Laoujin 2013-05-06 11:34:31

然後嘗試爲每個「span.nodetext」添加一個外部div，並給它一個寬度。 – drip 2013-05-06 11:36:33

我討厭這麼說..但是這在桌面上更好。除非你想用jQuery來跳轉一個DIV，否則獲取寬度，並把它放在上面的跨度上。或者，您可以開始考慮製作DIV的列而不是行。

來源

2013-05-06 13:12:01 Sean

將跨度換成換行符而不是跨越或推入正確的浮動div？

回答

相關問題