html - 流体画像の上の CSS 切り捨てテキスト

Question

画像の上にテキストを絶対に配置していますが、テキストが画像の上に広がる場合はテキストを切り捨てたいと思います。テキストの幅が定義されていれば、これは問題になりません。ただし、画像上のテキスト ブロックは 100% に設定され、画像の下部に配置されます。

テキストが画像を通過して展開される場合、テキストを非表示にするにはどうすればよいですか?

私の例をチェックしてください: http://jsfiddle.net/qhFUL/

Answer 1

overflowに設定hidden:

.box {
  overflow: hidden;
}

デモ: http://jsfiddle.net/qhFUL/1/

Answer 2

テキストも折り返さないようにしたい場合 (画像が隠れないようにするため)、次のようにします。

  .box {
    position: relative;
    margin-bottom: 20px;
    overflow: hidden;
  }

  .text {
    position: absolute;
    bottom: 0;
    left: 0;
    padding: 20px;
    white-space: nowrap;
  }

折り返しの代わりに長いテキストを切り捨てます。

Answer 3

.text div に高さを指定して、切り捨ててラップしないようにすることもできます。

次に、小さな jQuery 省略記号スクリプトを追加して、少しきれいにすることができます...

http://yue.st/notes/code/js/ellipsis.en.html

また

https://github.com/rmorse/AutoEllipsis

良い... ：）