1

ASP.NET MVCを使用してWebアプリを作成しています。これにより、ユーザーにいくつかの記事が表示されます。

そして、に関するすべての記事の要約がありdivます。

現在、コンテンツ全体をまとめて読み込んでおり、そのためにdivこのスタイルoverflow:hiddenを設定しています。結果は次のとおりです。

現在の結果

しかし、その断片的な行（最後の行）は醜いです。また、コンテンツ全体がユーザーのコンピューターにダウンロードされているため、速度とパフォーマンスが低下します。

私はこのようなものが欲しいです:(下の画像は私の目標です）

ゴール

（最後の行でその断片的なテキストを削除し、テキストの最後に追加...します）

また、コンテンツ全体をユーザーのコンピューターにダウンロードすることは避けてください。

どうやってするか？

PS：この質問のより良いタイトルを知っている人はいますか？！

4

4 に答える 4

2

表示する文字数を設定できます。表示するテキストが制限数よりも大きい場合は、切り捨てます。

if(text.Length > 200)
        {
            text.Substring(0, 200) + "..."; 
        }

または、システムを構築している場合は、制限されたフィールドを作成してプレビュー テキストを保存し、リストに大きなコンテンツの代わりにプレビュー テキストを表示することができます

于 2012-07-18T08:24:21.660 に答える
1

テキストを別の div に入れてheight+を使用しますline-height

作業例: http://jsfiddle.net/DNh4W/2/

省略記号で終わりたい場合、CSS3 には複数行テキストに対する解決策がありません。例: http://pvdspek.github.com/jquery.autoellipsis/のように、javascript を使用する必要があります。

jquery オートエリプシスの例: http://jsfiddle.net/bdM89/1/

于 2012-07-18T08:30:46.890 に答える
0

ブラウザの互換性に関してCSS3の使用に問題がない場合は、次のチュートリアルのように、CSSを使用してテキストを切り捨てることができます。

.ellipsis {
    overflow: hidden;
    text-overflow: ellipsis;
    -o-text-overflow: ellipsis; /* required for Opera */
    -ms-text-overflow: ellipsis;    /* required for IE8, allegedly */
    -moz-binding: url('ellipsis.xml#ellipsis');    /* for Firefox; details [here][2] */
}

mozilla firefoxに関して、XMLを使用してそれを処理する方法のチュートリアルがあります

于 2012-07-18T08:18:55.537 に答える
0

まず第一に、テキストの切り捨て (特定の文字数まで) と省略記号の追加は、サーバー側で行う必要があると思います。

次に、CSS のみを使用してこれを行いたい場合は、単に div の高さを auto にする必要があります。すべての人にとって同じではないかもしれませんが、見栄えは良いでしょう。

于 2012-07-18T08:29:00.367 に答える