2


0

フローティングフローコンテンツがメインコンテンツと重複しないようにするにはどうすればよいですか?

以下のHTMLがあります。

  Some content that's waaaaaaaaay too long to fit in the allotted space, but which can get cut off.

次のように表示されます。

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

ブラウザのサイズを変更してテキストを切り取ると、「

」の前ではなく、「」が「コンテンツ」と重なります。 さまざまな「パディング」と「マージン」を試しましたが、何も機能していないようです。 これは可能ですか?

注意: ``を追加するのは_とても_難しい

ここには ``が含まれています。 それが簡単だったら、私はそれをやるだけだろう:)

2 回答


1


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

1つの解決策は、div内にそのスパンを配置して、そのdivに「overflow:hidden」を与えることです。 または、スパンをdivに変更します。 それでも、divに画像の幅の右マージンを与えるのをいじる必要があるかもしれません。

`white-space:nowrap`プロパティがなければ簡単です。 これを使用する必要がないようにアプリケーションを再設計できる方法はありますか?


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

画像を ''の右端に配置します

」の右側のパディングは、画像がテキストと重ならないようにします。

位置の理由:「

位置の座標系になるように:絶対 ``。 また、z-indexが機能するには、位置タイプ(相対、絶対、または固定)も必要です。

それがうまくいかない場合は、次のように画像を背景画像として置くオプションがあります:

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