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>ます。いろいろ試してみましpaddingたmarginが、何もうまくいかなかったようです。これは可能ですか？

注意：ここだけを含むを追加するのは非常に困難です。それが簡単なら、私はそれをするでしょう:)<td><img>

4

2 に答える 2

1

overflow: hiddenインライン要素に適用しているため、機能していない可能性があります。

1つの解決策は、そのスパンを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>は画像がテキストと重ならないようにします。

位置：相対の理由は<td class="a">、位置：絶対の座標系になるためです<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 に答える