代码之家 › 专栏 › 技术社区 › James A. Rosen

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

crop css-float overflow css

2

James A. Rosen · 技术社区 · 15 年前

<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]]

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> 内容。我试过各种各样的方法 padding 和 margin

注:这是难以添加 <td> 只是包含了 <img>

2 回复 | 直到 13 年前

1

thomasrutter 15 年前

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

一种解决方案可能是将该跨度放在div中,给出该div . 或者将span改为div。你可能仍然需要给div一个右边距,即图像的宽度。

white-space: nowrap 财产。有没有任何可能的方法可以重新设计你的应用程序,使它不需要使用这个?

2

1

Pat 15 年前

试一试:

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"> <img> . 您还需要一个位置类型(相对、绝对或固定),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 */
}