调整浏览器窗口时文本溢出div的响应式网站修复问询

嘿，作为Bootstrap新手遇到文本溢出很正常，我来帮你搞定这个问题！从你的代码和描述来看，核心问题出在绝对定位的元素脱离了父容器的文档流，加上缺少响应式排版设置，导致窗口缩小时文本撑破容器。下面是具体的修复步骤和优化后的代码：

问题根源分析 #

你的<div class="adContent" style="position:absolute;">用了position:absolute，这个属性会让元素脱离正常文档流，父容器<div class="silverAds">无法计算它的高度和宽度，自然没法约束里面的文本，窗口缩小后就会溢出。另外，没有利用Bootstrap的响应式工具类处理排版和布局，也是原因之一。

具体修复方案 #

1. 移除绝对定位 #

删掉adContent上的position:absolute样式，让元素回到文档流中，父容器就能正常包裹它。

2. 添加Bootstrap响应式排版与容器类 #

• 给外层内容容器添加container或container-fluid（根据布局需求选择），确保不同屏幕下内容有合适边距。
• 给文本区域添加text-break类（或overflow-wrap: break-word样式），强制长单词换行，避免溢出。
• 用Bootstrap的flex布局代替float:right处理按钮位置，小屏幕下按钮会自动换行，不会和文本重叠。

3. 简化自定义圆角样式（可选） #

Bootstrap自带rounded系列类，可以代替你自定义的roundedcornr_box、roundedcornr_top等类，减少冗余代码。

优化后的代码 #

<!-- 外层用Bootstrap容器和圆角类替代自定义样式 -->
<div class="container my-4 rounded shadow">
  <div class="postpage p-4">
    <div class="customh1">
      <h1 class="posthead h2">Memberships & Benefits</h1>
    </div>
    <br />
    <div class="mainAdlistAds">
      <div class="silverAds">
        <!-- 移除绝对定位，添加text-break确保文本换行 -->
        <div class="adContent text-break">
          <ul class="list-unstyled">
            <li><a href="pdf/Dubai_Exporters_Member_Certficate.pdf" target="_blank">DubaiExporters Membership Certificate </a></li>
            <li>Log in to access and edit the Company profile.</li>
            <li>Access to the latest inquiries received from agents, importers, distributors all over the world.</li>
            <li>Company’s Logo , profile & the website link in the Supplier’s section.</li>
            <li>Advertisement of the Company shall be included in the Listing.</li>
            <li>Weekly Newsletter updates from Dubai Exporters containing latest news about the world economy, export scenarios, upcoming projects, trade events, market reviews and the link to the Member’s Profile on Dubai Exporters, shall be mailed to our entire database of over 150000 Importers from Africa, CIS,Eastern Europe, latin America, Asia.&nbsp;<a class="lightbox" href="images/newslettertemplate.jpg">View sample</a></li>
            <li>A CD of Dubai Exporters shall be distributed to all the trade visitors and importers visiting Int’l trade exhibitions where Dubai Exporters participates, thereby making your company’s information reach the right target audience.</li>
          </ul>
          <!-- 用Bootstrap flex布局代替float，保证响应式 -->
          <div class="d-flex justify-content-end mt-3">
            <asp:ImageButton ID="btSilver" runat="server" ImageUrl="images/mem_btn.png" />
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

关键修改说明 #

• 移除position:absolute后，adContent回到父容器文档流，父容器会自动适配它的高度。
• text-break类强制长文本在容器边界处换行，彻底解决溢出问题。
• d-flex justify-content-end代替float:right，按钮在大屏幕靠右，小屏幕自动换行到下方，避免和文本重叠。
• 用Bootstrap自带的container、rounded、shadow等类简化自定义样式，同时保证响应式效果。

这样调整后，你再缩小浏览器窗口，文本就会自动换行，不会溢出容器啦！如果还有细节需要调整，可以参考Bootstrap文档进一步优化~

内容的提问来源于stack exchange，提问作者chetan kambli