如何防止div內容溢出

我有一個html，當窗口縮小時，sub div的內容被截斷。即使最外面的div是溢出：auto，並且有一個滾動條.. 我注意到overflow：hidden被設置在多個子div中。內容html是由某些API生成的，重置所有這些溢出屬性將不切實際。如何防止div內容溢出

我的問題是：

這些孩子的div的高度/寬度未設置，爲什麼overflow屬性仍然適用？
是否有另一種方法來防止在子div中截止？像確保父div有足夠的高度？

下面是我的HTML的一個簡化版本：

<div id="main" style="width: 100%; height: 100%; overflow: auto; -ms-zoom: 1;" abp="1"> 
 
    <div style="box-sizing:border-box"> 
 
    <div style="overflow:hidden;text-align:left"> 
 
     <div id="SecListA" style="width: 100%; height: 100%; overflow: hidden; position: relative;"> 
 
     <div> 
 
      <span class="ttl" id="sectKey-18-HL" style="font-size: 20px; font-weight: 600;" abp="373">Section A</span> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
    <div style="box-sizing:border-box"> 
 
    <div style="overflow:hidden;text-align:left"> 
 
     <div id="SecListB" style="width: 100%; height: 100%; overflow: hidden; position: relative;"> 
 
     <div> 
 
      <span class="ttl" id="sectKey-18-HL" style="font-size: 20px; font-weight: 600;" abp="373">Section B</span> 
 
     </div> 
 
     <table class="skTbl" id="MRLTable-CVIntList280"> 
 
      <thead abp="416"> 
 
      <tr class="visHid colHdr" abp="417"> 
 
       <th class="rIndent" abp="418"></th> 
 
       <th class="hlImp" style="width: 96%;" abp="419"></th> 
 
       <th style="width: 1%;"></th> 
 
       <th style="width: 1%;"></th> 
 
       <th style="width: 1%;"></th> 
 
       <th style="width: 1%;"></th> 
 
      </tr> 
 
      </thead> 
 
      <tbody abp="424"> 
 
      <tr style="display: none;" abp="425"> 
 
       <td abp="426"></td> 
 
      </tr> 
 
      <tr> 
 
       <td abp="428"></td> 
 
       <td abp="429"> 
 
       <div style="padding-left: 0px; display: inline-block;" abp="430"><span class="vbIcn icn icnMan" abp="431"><img src="C:\PROGRAM FILES (X86)\Y.png" abp="432"></span></div> subtitle A 
 
       </td> 
 
       <td abp="433"> 
 
       <span abp="434"></span> 
 
       </td> 
 
       <td abp="435"><span abp="436"></span></td> 
 
       <td abp="437"><span class="MRLRecFldHover" abp="438"></span></td> 
 
       <td abp="439"><span class="MRLRecFldHover" abp="440"></span></td> 
 
      </tr> 
 
      <tr title="Edit this item"> 
 
       <td abp="442"></td> 
 
       <td class="hlImp titleField hlImp" abp="443"><span tabindex="0"><div style="padding-left: 20px; display: inline-block;" abp="445"><span class="vbIcn icn icnMan"><img src="C:\PROGRAM FILES (X86)\X.png"></span></div> paragrah A</span> 
 
     </td> 
 
     <td abp="448"><span></span></td> 
 
     <td abp="450"><span></span></td> 
 
     <td abp="452"><span></span></td> 
 
     <td abp="454"><span><span class="itAct" abp="456"><span title="Remove this set" style="padding: 0px 24px 16px 8px; vertical-align: top;"><span class="vbIcn icn icnDelete" abp="458"></span></span> 
 
     </span> 
 
     </span> 
 
     </td> 
 
     </tr> 
 
     <tr> 
 
     <td></td> 
 
     <td colspan="5"> 
 
      <table class="skForceFitTbl skTbl" cellspacing="0" cellpadding="0" abp="462"> 
 
      <tbody abp="463"> 
 
       <tr class="noLn" abp="464"> 
 
       <td class="skForceFitCell" abp="465"> 
 
        <span abp="466">  
 
    \t \t \t \t \t \t \t \t \t \t \t \t \t \t <table style="width: 100%; border-collapse: collapse; -ms-overflow-y: hidden;">  
 
    \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t <tbody abp="468">  
 
    \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t <tr abp="469">  
 
    \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t <td style="padding-left: 40px;" abp="470"></td>  
 
    \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t <td style="width: 100%; text-align: left;" abp="471">  
 
    \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t <span style="font-family: 'Segoe UI'; font-size: 14px; font-weight: normal;">  
 
    \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t some text for the ssdfasdfdsfffffffffffffffffffffffffffffffffffffffffffffffffffff. <br>dddddd  
 
    \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t </span> 
 
       </td> 
 
       </tr> 
 
      </tbody> 
 
      </table> 
 
      </span> 
 
     </td> 
 
     </tr> 
 
     </tbody> 
 
     </table> 
 
     </td> 
 
     </tr> 
 
     <tr style="display: none;" abp="425"> 
 
     <td abp="426"></td> 
 
     </tr> 
 
     <tr> 
 
     <td abp="428"></td> 
 
     <td abp="429"> 
 
      <div style="padding-left: 0px; display: inline-block;" abp="430"><span class="vbIcn icn icnMan" abp="431"><img src="C:\PROGRAM FILES (X86)\Y.png" abp="432"></span></div> subtitle B 
 
     </td> 
 
     <td abp="433"> 
 
      <span abp="434"></span> 
 
     </td> 
 
     <td abp="435"><span abp="436"></span></td> 
 
     <td abp="437"><span class="MRLRecFldHover" abp="438"></span></td> 
 
     <td abp="439"><span class="MRLRecFldHover" abp="440"></span></td> 
 
     </tr> 
 
     <tr title="Edit this item"> 
 
     <td abp="442"></td> 
 
     <td class="hlImp titleField hlImp" abp="443"><span tabindex="0"><div style="padding-left: 20px; display: inline-block;" abp="445"><span class="vbIcn icn icnMan"><img src="C:\PROGRAM FILES (X86)\X.png"></span></div> paragrah A</span> 
 
    </td> 
 
    <td abp="448"><span></span></td> 
 
    <td abp="450"><span></span></td> 
 
    <td abp="452"><span></span></td> 
 
    <td abp="454"><span><span class="itAct" abp="456"><span title="Remove this set" style="padding: 0px 24px 16px 8px; vertical-align: top;"><span class="vbIcn icn icnDelete" abp="458"></span></span> 
 
     </span> 
 
     </span> 
 
    </td> 
 
    </tr> 
 
    <tr> 
 
     <td></td> 
 
     <td colspan="5"> 
 
     <table class="skForceFitTbl skTbl" cellspacing="0" cellpadding="0" abp="462"> 
 
      <tbody abp="463"> 
 
      <tr class="noLn" abp="464"> 
 
       <td class="skForceFitCell" abp="465"> 
 
       <span abp="466">  
 
    \t \t \t \t \t \t \t \t \t \t \t \t \t \t <table style="width: 100%; border-collapse: collapse; -ms-overflow-y: hidden;">  
 
    \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t <tbody abp="468">  
 
    \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t <tr abp="469">  
 
    \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t <td style="padding-left: 40px;" abp="470"></td>  
 
    \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t <td style="width: 100%; text-align: left;" abp="471">  
 
    \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t <span style="font-family: 'Segoe UI'; font-size: 14px; font-weight: normal;">  
 
    \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t some text for the testing. This text will get cutoff when the window is small enough.... <br>dddddd  
 
    \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t </span> 
 
       </td> 
 
      </tr> 
 
      </tbody> 
 
     </table> 
 
     </span> 
 
     </td> 
 
    </tr> 
 
    </tbody> 
 
    </table> 
 
    </td> 
 
    </tr> 
 
    <tr title="Edit this item"> 
 
     <td abp="442"></td> 
 
     <td class="hlImp titleField hlImp" abp="443"><span tabindex="0"><div style="padding-left: 20px; display: inline-block;" abp="445"><span class="vbIcn icn icnMan"><img src="C:\PROGRAM FILES (X86)\X.png"></span></div> paragrah B</span> 
 
    </td> 
 
    <td abp="448"><span></span></td> 
 
    <td abp="450"><span></span></td> 
 
    <td abp="452"><span></span></td> 
 
    <td abp="454"><span><span class="itAct" abp="456"><span title="Remove this set" style="padding: 0px 24px 16px 8px; vertical-align: top;"><span></span></span> 
 
    </span> 
 
    </span> 
 
    </td> 
 
    </tr> 
 
    <tr> 
 
    <td></td> 
 
    <td colspan="5"> 
 
     <table cellspacing="0" cellpadding="0"> 
 
     <tbody> 
 
      <tr> 
 
      <td> 
 
       <span>  
 
    \t \t \t \t \t \t \t \t \t \t \t \t \t \t <table style="width: 100%; border-collapse: collapse; -ms-overflow-y: hidden;">  
 
    \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t <tbody abp="468">  
 
    \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t <tr abp="469">  
 
    \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t <td style="padding-left: 40px;" abp="470"></td>  
 
    \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t <td style="width: 100%; text-align: left;" abp="471">  
 
    \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t <span style="font-family: 'Segoe UI'; font-size: 14px; font-weight: normal;">  
 
    \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t some text for the testing. This text will get cutoff when the window is small enough.... <br>dddddd  
 
    \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t \t </span> 
 
      </td> 
 
      </tr> 
 
     </tbody> 
 
     </table> 
 
     </span> 
 
    </td> 
 
    </tr> 
 
    </tbody> 
 
    </table> 
 
    </td> 
 
    </tr> 
 
    </tbody> 
 
    </table> 
 
</div> 
 
</div> 
 
</div> 
 
</div>

來源

2017-03-31 Hui Liu

本文...

some text for the ssdfasdfdsfffffffffffffffffffffffffffffffffffffffffffffffffffff.

是最有可能的原因（它出現幾次）。它包含一個非常長的「單詞」，它強制要擴展的表格單元格。但這完全不現實。使用真正的文字長度，這將改變整個場景。

（如果你不想鍵入文本，只是谷歌「blindtext發電機」 - 有一些爲你生成隨機文本，你可以複製頁。）

來源

2017-03-31 13:56:15 Johannes

那是多麼溢出工作。如果您將其設置爲隱藏在div上，則任何流出其邊界的內容（無論流出的內容如何）都會被剪切掉。

理想情況下，適當的解決方案是更改標記。但是，如果你真的可以沒有，你可以用CSS使用!important本事：

#main div { 
    overflow: initial !important; 
} 

#main { 
    width: initial !important; 
    overflow: initial !important; 

} 

div#SecListB { 
    overflow: initial !important; 
}

退房小提琴here.

來源

2017-03-31 14:32:12 sn3ll

感謝@ sn3ll，在CSS學校也說，只有「overflow屬性適用於具有指定高度的塊元素「，但在我的html中，我沒有，爲什麼overflow：hidden仍然適用？ –

據我所見，溢出問題必須如此寬度而不是高度正確嗎？ – sn3ll

實際上，我試圖讓高度起作用，所以如果您將窗口縮小得足夠小，底部的內容就會被截斷。仍然存在滾動條，但即使您一直向下滾動，底部的文本仍然不可見... –

如何防止div內容溢出

回答

相關問題