3

コンテンツの長い文字列を前提として、テキストの最初の2行だけを表示したいと思います。このコンテンツのコンテナは流動的であり、ブラウザの幅に合わせてサイズが変更されます。コンテナの幅に関係なく、テキストには常に2行のみを表示する必要があります。これを行う方法はありますか？

上記を行う方法がない場合、文字数に基づいて制限する方法はありますか？

4

4 に答える 4

7

このスニペットが役立ちます。

フォント サイズの変更については、 Max-HeightとLine -Height を調整するだけです。

 .limit-2 {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    line-height: 21px;
    max-height: 48px;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
 }
于 2014-12-22T14:40:26.673 に答える
1

純粋なCSSソリューションは、テキストブロックと「text-overflow」プロパティに指定された高さを使用することを意味します。CSSには線の概念がないため、これを実現するのはかなり困難です。代わりに、JavaScriptソリューションは、改行文字に一致する正規表現を意味します。

于 2013-02-04T11:17:51.730 に答える
1

divの高さを固定して、次のように作成できoverflowますhidden

    div{
    height:auto;
    max-height:40px;
    overflow:hidden; 
    background:red
}

デモが更新されました

また

簡単なJquery方法を使用する

$('p').condense({ellipsis:'…', condensedLength: 55});

デモ2

于 2013-02-04T11:16:13.803 に答える
1

あなたの問題を解決するためのいくつかの回避策があります (これは css では不可能だと思います)。

したがって、私のソリューションは次のように機能します。

var height = parseInt($("#foo").css("line-height"));
var lineCount = 2;
height *= lineCount;

$("#foo").css("height", height + "px");

line-heightコンテナとコンテナのセットheightを に取りますline-height * lineCount。

jsフィドル

于 2013-02-04T11:26:04.977 に答える