2

我有以下 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>重叠<span>。我尝试了各种paddingand margins，但似乎没有任何效果。这可能吗？

注意：很难添加<td>仅包含<img>此处的内容。如果这很容易，我会这样做:)

4

2 回答 2

1

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

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

white-space: nowrap没有属性会容易得多。是否有任何可能的方法可以重新设计您的应用程序，使其不需要使用它？

于 2010-07-30T00:25:13.950 回答
1

试试这个：

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>将防止图像与文本重叠。

position: relative 的原因<td class="a">是它成为 position: 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 */
}
于 2010-07-30T00:31:28.947 回答