0

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

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

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

4

3 に答える 3

0

overflowに設定hidden:

.box {
  overflow: hidden;
}

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

于 2012-04-26T03:22:07.177 に答える
0

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

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

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

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

于 2012-04-26T03:26:06.190 に答える
0

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

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

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

また

https://github.com/rmorse/AutoEllipsis

良い... ：）

于 2012-04-26T03:39:47.737 に答える