嵌套的span標籤需要在外部div標籤中實施水平滾動條

我有一個使用div標籤，嵌套div標籤和嵌套span標籤（沒有實際表格元素）創建的表格。當內部span標籤的內容太寬時，水平滾動條不會顯示爲外部div標籤。例如。嵌套的span標籤需要在外部div標籤中實施水平滾動條

<div>Some text 
    <span> Here is the suuuuuuuper wide text</span> 
</div>

有沒有人知道如何讓div標籤顯示水平滾動條時，內部span標籤內容變得太寬？

編輯：使用溢出：滾動使滾動條總是顯示，我只想當內部span標記內容太寬時顯示滾動條。

來源

2014-04-03 Meyer Denney

只要將文本滾動時間過長，將溢出分配給div css即可。

div { overflow: scroll;}

來源

2014-04-03 18:41:05 Clayton

謝謝，這個工作，但我只想滾動條在需要的時候，而不是永遠在那裏 –

的div {溢出顯示：自動;} – Clayton

我也試過這個，但由於某些原因，當內部span標籤變得太寬時，外部div從不顯示水平條。有可能是其他類/風格是覆蓋溢出：自動？我會認爲溢出：在div標籤上的auto會允許滾動條在任何時候顯示內部span標籤變得太寬。這是默認行爲，對嗎？ –

如果我理解正確的話，你只需要在跨度上你的DIV的寬度，並white-space: no-wrap;保持它向下流動到下一行。如果你想要一個單獨的行，也可以向div本身添加no-wrap。

小提琴：http://jsfiddle.net/ZmLbs/

<div>Some text 
    <span> Here is the suuuuuuuper wide text</span> 
</div> 

<div>Some text 
    <span> Here is shorter text</span> 
</div> 

<div class="single-line">Some text 
    <span> Here is single-line text</span> 
</div>

CSS：

div { 
    width: 150px; 
    border: 1px solid red; 
    overflow-y: auto; 
} 
span { 
    white-space:nowrap; 
} 
.single-line { 
    white-space: nowrap; 
}

來源

2014-04-03 20:47:52 cjspurgeon

嵌套的span標籤需要在外部div標籤中實施水平滾動條

回答

相關問題