CSS/JS でクロスブラウザーのワードラッピングを実現するにはどうすればよいですか?

CSS/JS でのワードラップ: クロスブラウザー ソリューション

長いテキスト文字列をスクロールせずに所定の DIV 幅内で折り返すという課題長い間 Web 開発者を悩ませてきました。これに対処するために、さまざまなアプローチが検討されてきましたが、それぞれに独自の制限があります。「オーバーフロー: 非表示/自動/スクロール」などの

• オーバーフロー テクニックは、テキストの可視性を制限し、スクロールを許可します。これはこのシナリオでは望ましくありません。
• ­ の挿入文字列に挿入するにはJavaScriptまたはサーバー側の変更が必要ですが、コピーと貼り付けが中断される可能性があり、ブラウザ間で一貫してサポートされていません。
• 非表示要素によるテキスト幅の測定は計算コストが高く、特に広範なテキスト本文の場合、サイトが凍結される可能性があります。
• 等幅フォントは幅の計算を中断し、テキストのスタイルを制限する可能性があります。

「word」のような有望な候補にもかかわらず-wrap: ブレークワード」および「」タグを使用している場合、これらのアプローチにはブラウザーのサポートがないか、正確な限界点の計算が必要ですが、それは依然としてわかりにくいものです。

Eureka! CSS による救済

ついに、CSS の領域にブレークスルーが現れました:

.wordwrap {
    white-space: pre-wrap; /* css-3 */
    white-space: -moz-pre-wrap; /* Mozilla, since 1999 */
    white-space: -pre-wrap; /* Opera 4-6 */
    white-space: -o-pre-wrap; /* Opera 7 */
    word-wrap: break-word; /* Internet Explorer 5.5+ */
}

この CSS ルールを利用することで、開発者は落とし穴なしでクロスブラウザーのワード ラッピングをシームレスに実現できます。以前の方法の。さらに、「word-wrap:normal;」を使用することもできます。

このソリューションは、ワード ラップの課題にエレガントに対処し、開発者が長い URL やその他の途切れることのないテキスト文字列を、見た目が美しく、ブラウザと互換性のある方法で表示できるようにします。

以上がCSS/JS でクロスブラウザーのワードラッピングを実現するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。