固定コンテナ内で複数行テキストのオーバーフロー用に省略記号を実装するにはどうすればよいですか?-jsチュートリアル-php.cn

固定コンテナ内で複数行テキストのオーバーフロー用に省略記号を実装するにはどうすればよいですか?

Patricia Arquette

リリース： 2024-10-26 16:17:03

オリジナル

637 人が閲覧しました

How to Implement Ellipsis for Multi-line Text Overflow within a Fixed Container?

固定コンテナ内の複数行オーバーフローの省略記号処理

Web 開発では、指定された幅と高さのコンテナ内に複数行のテキストを表示することが必要になることがよくあります。。ただし、テキストが使用可能なスペースを超えると、見苦しいオーバーフローが発生する可能性があります。これに対処するために、開発者は多くの場合、隠されたテキストがさらにあることを示す省略記号を実装するメソッドを模索します。

そのようなシナリオの 1 つは、テキストが

内に含まれる場合です。幅と高さの両方が固定された要素。さまざまな jQuery プラグインが存在しますが、完璧なソリューションを見つけるのは難しい場合があります。この記事では、望ましい結果を達成するための基本的かつ効果的なアプローチについて説明します。

jQuery を使用すると、

のテキストコンテンツを操作する便利な方法が提供されます。要素。私たちの目標は、テキストの高さが指定されたコンテナーの高さ内に収まるまで、最後の単語を繰り返し削除することです。これは、outerHeight() 関数を利用してテキストの高さがコンテナの高さを超えているかどうかを確認し、超えている場合は text() 関数を使用してテキストの最後の単語を切り詰めることによって実現されます。

オーバーフローは非表示のままですが、オーバーフローを使用します。

の CSS プロパティ要素。こうすることで、JavaScript が無効になっている場合でも、省略記号なしで結果が視覚的に正しく表示されます。

このソリューションの CSS と jQuery コードは次のとおりです。

<code class="css">#fos { width: 300px; height: 190px; overflow: hidden; }
#fos p { padding: 10px; margin: 0; }</code>

ログイン後にコピー

<code class="javascript">var $p = $('#fos p');
var divh = $('#fos').height();
while ($p.outerHeight() > divh) {
    $p.text(function (index, text) {
        return text.replace(/\W*\s(\S)*$/, '...');
    });
}</code>

ログイン後にコピー

このアプローチでは、固定幅と高さのコンテナ内で省略記号を処理することで、複数行のテキストオーバーフローの問題をシンプルかつ効率的に解決します。 jQuery と CSS を組み合わせることで、JavaScript が無効な場合でもアクセシビリティを維持しながら、目的の視覚効果を実現できます。

以上が固定コンテナ内で複数行テキストのオーバーフロー用に省略記号を実装するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。