Some content that's waaaaaaaaay too long to fit in the allotted space, but which can get cut off.
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 */ }