7

要素がテキスト コンテンツを表示するのに十分な幅がない場合に、CSS を使用して (一度に文字ではなく) 単語を一度に非表示にする方法はありますか?

たとえば、次のコードでは、ブラウザ ウィンドウが狭くなって文全体が表示されたときに、Lorem ipsum dolor sit...代わりに表示するようにします。Lorem ipsum dolor sit ame...

HTML:

<div>Lorem ipsum dolor sit amet</div>

CSS:

div { overflow:hidden; text-overflow:ellipsis; white-space-nowrap; }

(古いブラウザをサポートする必要はありません)

4

1 に答える 1

5

コンテナの高さを 1 行のテキストと同じにするだけでよく、overflow: hidden.

/* hide one word at a time */

p.short {
    height: 18px;
    overflow: hidden; }

/* display an ellipsis "..." */

p.ellipsis { 
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap; }

http://jsfiddle.net/Wexcode/fbhxL/

于 2013-10-28T02:01:14.837 に答える