可読性を犠牲にすることなく、クロスブラウザーのテキスト折り返しを実現するにはどうすればよいですか?

クロスブラウザーのテキストの折り返し: 課題への取り組み

固定幅の div 内に長いテキストをカプセル化することは、クロスブラウザーの悪夢になる可能性があります特に、テキストに自然な改行スペースがない場合はそうです。さまざまなアプローチが提案されていますが、それぞれに欠点があります。

従来の手法では不十分

オーバーフロー設定や内気な文字の挿入には効果が限られています。非表示の要素と等幅フォントは、ズーム時に予期しない動作が発生する可能性があります。

有望だが不完全な解決策

CSS3 の「ワードラップ: ブレークワード」プロパティは理想的であるように見えますが、主要なブラウザではサポートされていないままです。 WBR タグを挿入するとブラウザ間の互換性が保証されますが、最適なブレークポイントを見つけるのは依然として困難です。

とらえどころのない聖杯

完璧なソリューションの探索は続いています。ただし、有望なアプローチの 1 つは次のとおりです。

CSS をレスキュー

「空白」や「ワードラップ」などの CSS プロパティを利用すると、次のことを実現できます。クロスブラウザーでのテキストの折り返し:

.wordwrap {
    white-space: pre-wrap;
    white-space: -moz-pre-wrap;
    white-space: -pre-wrap;
    white-space: -o-pre-wrap;
    word-wrap: break-word;
}

これらのスタイルをコンテナーに適用すると、長いテキストを確実に折り返すことができます。部分は適切に折り返され、ブラウザーの互換性を犠牲にすることなく読みやすさが維持されます。

以上が可読性を犠牲にすることなく、クロスブラウザーのテキスト折り返しを実現するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。