9

これは私のCSSスニペットです

.test{
    width:150px;
    height:60px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    -o-text-overflow: ellipsis;
}

それがすることは..

the quick brown fo...

私が欲しいのは

the quick brown fox
jumps over the lazy
dog. the quick br...

CSSだけでこれを行う方法はありますか？または、これにはjavascriptを使用する必要がありますか? JavaScript が必要な場合は、だれでもその方法を教えてもらえますか? ありがとう！

アップデート

を削除してみwhite-space: nowrap;ましoverflow-y: hidden;たが、3行のレイアウトが表示されますが、省略記号は表示されません

.test{
    width:150px;
    height:60px;
    overflow-y: hidden;
    text-overflow: ellipsis;
    -o-text-overflow: ellipsis;
}
4

2 に答える 2

7

dotdotdotプラグインhttp://dotdotdot.frebsite.nl/を使用できます。私にとっては問題なく動作します。

純粋な CSS は一部のブラウザで機能しますが、多くの制限があります。...行末に必要だとします3。

.test{
   display: -webkit-box;
   height: 60px; 
   -webkit-line-clamp: 3;
   -webkit-box-orient: vertical;
   text-overflow: ellipsis;
 }
于 2013-04-26T08:21:02.863 に答える
4

これを試すこともできます

.test { width: 150px; height: 60px; overflow-y: hidden; position: relative; }

.test:after { content: '...'; position: absolute; bottom: 0; right: 0; }
于 2013-04-26T09:49:09.137 に答える