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;   
}

デモ

上記のコードは、省略記号からはみ出す単一行のテキストを記述する長年の標準的な方法です。 . この書き方をしたことがある方も多いのではないでしょうか。

複数行表示の問題を解決するにはどうすればよいですか? グーグルで調べたところ、上記のニーズを解決できる 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;   
}

Demo

上記がこの記事の全内容です。皆さんの学習に役立つことを願っています。関連コンテンツの詳細については、PHP 中国語 Web サイトに注目してください。

関連する推奨事項:

CSS を使用して純粋な英語の数字の自動行折り返しを実現する

CSS を使用してページコンテンツのアスペクト比を維持する方法

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