如何隐藏主页面中被iframe遮挡的溢出文本？

你的主页面里，position: fixed的iframe占了右侧90%宽度，导致标题、链接这类内容会延伸到iframe覆盖的区域。下面两种方法可以解决这个问题：

方法一：给主内容加容器，限制宽度避免重叠 #

直接把主内容放在左侧剩下的10%宽度区域里，从根源上避免内容和iframe重叠：

修改后的index.html代码：

<!DOCTYPE html>
<html>
<body>
<iframe src="page2.html" name="iframe1" id="iframe1" style="position: fixed; top: 0; right: 0; height:100%; width:90%;"></iframe>

<!-- 用容器包裹主内容，限制宽度 -->
<div style="width: 10%; padding-right: 4px; box-sizing: border-box;">
  <h1>MY HEADLINE</h1>
  <h3><a href="abc1.html" target="iframe1">Link 1 - abc ...................Z</a></h3>
  <h3><a href="abc2.html" target="iframe1">Link 2 - abc ...................Z</a></h3>
  <h3><a href="abc3.html" target="iframe1">Link 3 - abc ...................Z</a></h3>
</div>
</body>
</html>

方法二：单行文本截断溢出部分 #

如果不想限制容器宽度，只想让文本在碰到iframe时截断（可选显示省略号），可以给文本元素加以下样式：

修改后的h3标签示例：

<h3 style="max-width: 10%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">
  <a href="abc1.html" target="iframe1">Link 1 - abc ...................Z</a>
</h3>

样式说明：

• max-width: 10%：对应iframe的90%宽度，预留出主内容的显示空间
• white-space: nowrap：强制文本不换行
• overflow: hidden：隐藏溢出到iframe区域的内容
• text-overflow: ellipsis：溢出部分用省略号代替（不需要的话可以去掉这一行）

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