11

次のコードを使用して、テキストが新しい行にオーバーフローするのを防ぎます。

.info-box{
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden; 
  height: 3em;
  width: 300px;
  font-size: 1em;
  line-height: 1em;
}

これは期待どおりに機能しますが、このボックスには 3 行分のスペースがあります。テキストが 3 行目を超えた場合に省略記号を適用するようブラウザに指示するにはどうすればよいですか? または、テキストオーバーフローは 1 つだけで機能しますか?

これにJSが必要な場合、私は気にしません。

4

2 に答える 2

5

このようにCSSで偽造することができます。

<span>...</span>の先頭にを追加しdivます。

<div class="info-box"><span>...</span>Lorem ipsum dolar etc.</div>

CSSで

  1. nowrapとを取り除くtext-overflow

  2. いくつか追加するpadding-right

  3. span下を右下に配置します。

CSS

.info-box{
    overflow:hidden;  
    height: 3em;
    width: 300px;
    font-size: 1em;
    line-height: 1em;
    padding-right:20px;
}

.info-box span{
    position:relative;
    top:31px;
    left:297px;
    display:inline-block;
}

実例：http： //jsfiddle.net/jasongennaro/UeCsk/

fyi ...左上に省略記号があるはずの小さなギャップがあります（を使用しているため）position:relative;。

fyi 2top ...これは、とを調整すれば、必要な数の行（質問で3つ言及した）で機能するはずですleft。

于 2011-09-24T18:22:33.570 に答える