CSSを使って長すぎるタイトルテキストに省略記号を表示する方法の紹介

この記事では、CSSを使用してタイトルテキストの長文部分に省略記号を表示する方法を主に紹介し、単行テキストオーバーフローと複数行テキストオーバーフローの状況について説明します。 以前、会社のモバイルサイトを再構築する際に、商品リストのタイトルを2行まで表示し、2行を超える文字は省略記号で表示するという要件に遭遇しました。以下の図に示すように、当時の第一印象は、この要件はバックグラウンド出力中に文字をインターセプトするか、JS を介して文字を計算することによってのみ処理できるということでした。これは、スタイルでは折り返されたテキストの省略を制御できないためですが、モバイル サイトの新しいバージョンはストリーミングです。レイアウトの場合、さまざまな解像度での携帯電話での改行の幅は不確実であるため、インターセプトする文字数の標準範囲はありません。例: iPhone では 15 文字が 2 行で表示されますが、Samsung では 1 行で表示されない場合があります。または、解像度が低い携帯電話では、すでに 15 文字が表示されています。この場合は 3 行 これが起こると頭が痛くなります。
まず、単一行のテキストに改行を記述する方法を確認しましょう:

コードは次のとおりです:

A20 Banana Pi Development Board Module - Deep Blue

CSS コード

.title{   
    width: 150px;   
    height: 25px;   
    line-height: 25px;   
    overflow: hidden;   
    whitewhite-space: nowrap;   
    text-overflow: ellipsis;   
}

上記のコードは、長年使用されている標準的な方法です。省略記号からはみ出す 1 行のテキストを書くこと。このシナリオでは、誰もがこの書き方を使ったことがあると思います。

複数行表示の問題を解決するにはどうすればよいですか? グーグルで調べた結果、上記のニーズを解決できる Chrome の API が見つかりました。残念ながら、この API は現在 Chrome でのみサポートされています。 W3C 標準には含まれていないため、将来的には Chrome 上でのみこの機能が利用できることになります。これは非常に残念ですが、現在はすべてのモバイル端末が Webkit のカーネルを使用しているため、上記の API を使用することができますので安心してください。 、実装を見てみましょう。例:

コードは次のとおりです:

A20 Banana Pi Development Board Module - Deep Blue

CSSコード

.title{   
    width:150px;   
    overflow : hidden;   
    text-overflow: ellipsis;   
    display: -webkit-box;   
    -webkit-line-clamp: 2;   
    -webkit-box-orient: vertical;   
}

以上がCSSを使って長すぎるタイトルテキストに省略記号を表示する方法の紹介の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。