Css 如何防止浮动的右侧内容与主内容重叠？

我有以下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>

我有以下CSS：

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

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

当我调整浏览器的大小以剪切文本时，它会在

的边缘而不是

之前剪切，从而使

与

内容重叠。我尝试了各种

填充

和

边距

s，但似乎都不起作用。这可能吗

---

注意：很难在这里添加一个只包含

的

。如果简单的话，我会这么做：）

可能是

溢出：隐藏
不起作用，因为您正在将其应用于内联元素

一种解决方案可能是将该跨度放在一个div中，使该div
溢出：hidden
。或者将跨度更改为div。您可能仍然需要在为div指定图像宽度的右边距时进行调整

如果没有
空白：nowrap
属性，这将容易得多。是否有任何可能的方法可以重新设计应用程序，使其不需要使用此功能？
尝试一下：

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;       
}

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

在
中设置位置：relative的原因是它成为位置：absolute
的坐标系。您还需要一个位置类型（相对、绝对或固定）才能使用z索引

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

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 */
}

查看
clear
指令。我不是CSS专家，但在
中放置浮点似乎是自找麻烦。在
中，浮点和清除都很好，但Netscape除外，它在
中使用浮点和位置：relative时会出错……天知道为什么。将
更改为
显示：block
效果很好！我还在图像中添加了一点左填充，但这与问题没有多大关系。
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 */
}