如何防止div内容溢出

Question

我有一个 html，当窗口缩小时，子 div 的内容会被截断。即使最外面的 div 是溢出：自动，并且有一个滚动条.. 我注意到溢出：隐藏设置在多个子 div 中。问题是内部 html 是从某些 API 生成的，重置所有这些溢出属性是不切实际的。

我的问题是：

1. 这些子 div 的高度/宽度没有设置，为什么溢出属性仍然适用？
2. 还有其他方法可以防止子 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">    
    														<table style="width: 100%; border-collapse: collapse; -ms-overflow-y: hidden;">    
    															<tbody abp="468">    
    																<tr abp="469">    
    																	<td style="padding-left: 40px;" abp="470"></td>    
    																	<td style="width: 100%; text-align: left;" abp="471">    
    																		<span style="font-family: 'Segoe UI'; font-size: 14px; font-weight: normal;">    
    																			some text for the ssdfasdfdsfffffffffffffffffffffffffffffffffffffffffffffffffffff. <br>dddddd    
    																		</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">    
    														<table style="width: 100%; border-collapse: collapse; -ms-overflow-y: hidden;">    
    															<tbody abp="468">    
    																<tr abp="469">    
    																	<td style="padding-left: 40px;" abp="470"></td>    
    																	<td style="width: 100%; text-align: left;" abp="471">    
    																		<span style="font-family: 'Segoe UI'; font-size: 14px; font-weight: normal;">    
    																			some text for the testing. This text will get cutoff when the window is small enough.... <br>dddddd    
    																		</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>    
    														<table style="width: 100%; border-collapse: collapse; -ms-overflow-y: hidden;">    
    															<tbody abp="468">    
    																<tr abp="469">    
    																	<td style="padding-left: 40px;" abp="470"></td>    
    																	<td style="width: 100%; text-align: left;" abp="471">    
    																		<span style="font-family: 'Segoe UI'; font-size: 14px; font-weight: normal;">    
    																			some text for the testing. This text will get cutoff when the window is small enough.... <br>dddddd    
    																		</span>
            </td>
          </tr>
        </tbody>
      </table>
      </span>
    </td>
  </tr>
  </tbody>
  </table>
  </td>
  </tr>
  </tbody>
  </table>
</div>
</div>
</div>
</div>

Answer 1

这就是溢出的工作原理。如果在 div 上将其设置为隐藏，则任何流出其边界的内容，无论是什么使其流出，都会被剪裁。

理想情况下，正确的解决方案是更改标记。但是，如果你真的不能，你可以使用 !important 用 css 破解它：

#main div {
  overflow: initial !important;
}

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

}

div#SecListB {
  overflow: initial !important;
}

看看小提琴here.

Answer 2

这段文字...

some text for the ssdfasdfdsfffffffffffffffffffffffffffffffffffffffffffffffffffff.

很可能是原因（它出现了好几次）。它包含一个非常长的“单词”，它迫使要扩展的表格单元格。但这完全不现实。使用真实的文字和真实的文字长度，这将改变整个场景。

（如果您不想输入文本，只需谷歌“blindtext generator” - 有些页面会为您生成随机文本，您可以复制。）