HTML Div 要素内の長いテキスト文字列を適切にワードラップするにはどうすればよいですか?

HTML でのテキストの折り返し: 総合ガイド

div 要素の指定された幅を超えるテキストに直面した場合、適切な折り返しを実現するにはワードラップは読みやすさを維持するために非常に重要です。この記事では、HTML とスタイル技術を使用してテキストを効果的に折り返すためのさまざまなソリューションについて説明します。

質問:

「aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa」などの長いテキスト文字列について考えてみましょう。幅が制限された、たとえば 200px の div 要素内でラップするにはどうすればよいですか?

答え:

1 つの直接的なアプローチは、CSS の word-wrap プロパティを利用することです。 :

div {
    width: 200px;
    word-wrap: break-word;
}

このプロパティは、ハイフンまたはその他の意味のある単語で単語を区切るようブラウザに指示します。文字のはみ出しを防ぐポイント。あるいは、空白プロパティを pre-wrap または pre-line に設定して、同様の結果を実現することもできます。

追加の考慮事項:

さらに細かく制御するにはワードラップよりも、jQuery または JavaScript ライブラリの使用を検討してください。次のコードは、jQuery を使用して段落内でテキストを折り返す方法を示しています。

$("p").each(function() {
    $(this).css("word-wrap", "break-word");
});

このアプローチにより、Web ページの特定の要素または領域にワード ラップを動的に適用できます。

以上がHTML Div 要素内の長いテキスト文字列を適切にワードラップするにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。