如何防止右浮动内容与主要内容重叠？

Question

我有以下 HTML：

<td class='a'>
  <img src='/images/some_icon.png' alt='Some Icon' />
  <span>Some content that's waaaaaaaaay too long to fit in the allotted space, but which can get cut off.</span>
</td>

它应该显示如下：

[Some content that's wa [ICON]]

我有以下 CSS：

td.a span {
  overflow: hidden;
  white-space: nowrap;
  z-index: 1;
}

td.a img {
  display: block;
  float: right;
  z-index: 2;
}

当我调整浏览器大小以截断文本时，它会在 的边缘截断，而不是在 之前，这使得 与 内容重叠。我尝试了各种 padding 和 margin，但似乎没有任何效果。这可能吗？

注意：在此处添加仅包含 的 非常困难。如果这很容易，我就会这么做:)

Answer 1

overflow:hidden 可能不起作用，因为您将其应用于内联元素。

一种解决方案可能是将该跨度放置在 div 内，使该 div overflow:hidden。或者将 span 更改为 div。您可能仍然需要为 div 提供图像宽度的右边距。

如果没有 white-space: nowrap 属性，事情会容易得多。有没有什么可能的方法可以重新设计您的应用程序，以便它不需要使用它？

Answer 2

尝试一下：

td.a {
   position: relative;
}

td.a span {       
   display: block;
   overflow: hidden;
   white-space: nowrap; 

   position: relative;
   z-index: 1;

   padding-right: 20px; /* This should be the width of your image */
}

td.a img {
   position: absolute;
   z-index: 2;
   top: 0;
   right: 0;       
}

它会将图像放在 的最右侧，并且 上的右侧填充将防止图像重叠文本。

中的position:relative的原因是为了使其成为position:absolute的坐标系。您还需要一个位置类型（相对、绝对或固定）才能使 z-index 发挥作用。

如果这不起作用，是否可以选择将图像作为背景图像放在 上，如下所示：

td.a span {       
   display: block;
   overflow: hidden;
   white-space: nowrap; 

   padding-right: 20px; /* This should be the width of your image */
   background: url(your-img.png) no-repeat 100% 0; /* right-top aligned background */
}