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

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

注意：很难添加只包含margin的{{1}}。如果这很容易，我会这样做：）

Answer 1

overflow: hidden可能无法正常工作，因为您将其应用于内联元素。

一种解决方案可能是将该跨度放在div中，给出div overflow: hidden。或者将跨度更改为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;       
}

它会将图像放在<td>的最右侧，而<span>上的右侧边距会使图像与文本重叠。

<td class="a">中位置：相对的原因是它成为位置的坐标系：absolute <img>。您还需要一个位置类型（相对，绝对或固定）才能使z-index起作用。

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

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

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

2 个答案: