0

http://jsbin.com/oqotew/edit#html,live

ブラウザ ウィンドウが広いときに上記のリンクにアクセスすると、画像の右側にテキストが表示されます。ウィンドウを狭くすると、テキストが画像の下にジャンプします。

目標: テキストを常に画像の右側に残し、ウィンドウが狭すぎてテキストが収まらない場合はいつでも、テキストを画像の下にぶつけるのではなく、"..." でオーバーフローさせたいと考えています。それは可能ですか？

私のCSSは次のようになります。

img { float: left; margin-right: 10px; }
.details { float: left; }
a { display: block; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; color: #39C; font-size: 16px; text-decoration:none; }

HTML:

<img src="http://placehold.it/130x65" />
<div class="details">
  <a href="#">Kind of a long title for a url. This should overflow with ellipsis if the browser gets narrower.</a>
</div>
4

1 に答える 1

1

フロートを外してみる.details

img { float: left; margin-right: 10px; }
a { display: block; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; color: #39C;
font-size: 16px; text-decoration:none; }

更新されたデモ

于 2012-07-06T17:12:06.203 に答える