スペースを改行せずにクロスブラウザのワードラップを実現するにはどうすればよいですか?

スペースを区切らずにブラウザ間で単語を折り返す

制約された div 内で途切れることのない長いテキストを折り返すという課題に取り組むのは、ブラウザ間をまたぐパズルになる可能性があります。さまざまな CSS プロパティと技術の制限により、普遍的にサポートされる解決策を見つけるのは難しいことがわかります。

考えられる解決策とその欠点

オーバーフロー プロパティを使用してこの問題を解決しようとすると、完全なテキストの可視性を確保できません。 ­ のご紹介です。 JavaScript またはサーバーサイド スクリプトを介してテキストに文字を挿入する場合、Safari での互換性の問題と、これらの文字の最適な配置を見つける複雑さに直面します。オフセット幅を測定するために非表示の要素にテキストを挿入すると、大幅なパフォーマンス コストが発生します。

等幅フォントと CSS3 の word-wrap:break-word プロパティは希望をもたらしますが、どちらもユニバーサル ブラウザのサポートがありません。注射タグにはある程度の有用性がありますが、ブレークポイントを測定することは依然としてハードルです。すべての文字の後にブレークを追加するのは非効率的であり、メモリを大量に消費します。

有望な解決策

幸いなことに、CSS は空白プロパティの形式でシンプルでブラウザを横断したソリューションを提供します。次の CSS ルールを適用すると、すべての主要なブラウザで一貫してテキストの折り返しを実現できます。

.wordwrap {
    white-space: pre-wrap; /* CSS3 */
    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 クラスを使用すると、特定の幅の div 内でテキストを折り返し、妥協することなくプレゼンテーションと読みやすさを向上させることができます。ユーザーインタラクションまたはアクセシビリティ。

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