質問の形式を維持し、記事の内容を反映した、いくつかのタイトルオプションを次に示します。短くて簡潔: * 固定サイズの Div で複数行のテキストの省略記号を作成するにはどうすればよいですか? * テキストオーバー-jsチュートリアル-php.cn

質問の形式を維持し、記事の内容を反映した、いくつかのタイトルオプションを次に示します。短くて簡潔: * 固定サイズの Div で複数行のテキストの省略記号を作成するにはどうすればよいですか? * テキストオーバー

Barbara Streisand

リリース： 2024-10-27 00:39:03

オリジナル

991 人が閲覧しました

Here are a few title options, keeping the question format and reflecting the article's content:

Short & Concise:

* How to Create an Ellipsis for Multi-Line Text in a Fixed-Sized Div?
* Text Overflowing? Ellipsis Solution for Fixed Width and Height Divs

固定幅と高さの省略記号テキストのオーバーフロー

問題:

要素の幅と高さが固定されているのは難しい場合があります。 jQuery プラグインを調べても、適切な解決策は見つかりませんでした。

解決策:

jQuery を利用すると、指定された範囲内に収まるまでテキストから最後の単語を繰り返し削除することで、目的の効果を得ることができます。身長。コードスニペットは次のとおりです:

var $p = $('#fos p');
var divh = $('#fos').height();
while ($p.outerHeight() > divh) {
    $p.text(function (index, text) {
        return text.replace(/\W*\s(\S)*$/, '...');
    });
}このスクリプトは、テキストが  内に収まるまで、テキストの最後の単語を省略記号 (...) に繰り返し置き換えます。 JavaScript が無効になっていても、テキストは省略記号なしで正しく表示されます。
パフォーマンスを最適化するには、このクライアント側の切り捨てとサーバー側の切り捨てを組み合わせてオーバーヘッドを削減することを検討してください。
実際のサンプルについては、この jsFiddle デモをチェックしてください。
以上が質問の形式を維持し、記事の内容を反映した、いくつかのタイトル オプションを次に示します。

短くて簡潔:

* 固定サイズの Div で複数行のテキストの省略記号を作成するにはどうすればよいですか?
* テキストオーバーの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。