CSS と JavaScript を使用してクロスブラウザーのワード ラッピングを実現するにはどうすればよいでしょうか?

CSS と JavaScript でのクロスブラウザー Word Wrapping

このデジタル時代において、定義された幅の要素内で長く途切れることのないテキストのブロックを処理するは共通の課題です。この問題は、URL やその他の長いシーケンスの可読性を維持することが重要である Web 開発で特に顕著です。

従来、開発者はこの問題に対処するためにさまざまな手法に依存してきましたが、それぞれに独自の欠点がありました。

• オーバーフロー: 非表示 / 自動 / スクロール: 余分なテキストを非表示にしますが、スクロールしないと表示できません。
• 挿入: テキストをサポートFirefox では折り返しますが、Safari でコピーして貼り付けると壊れます。
• テキスト幅の測定: 正確な測定には高価な DOM 挿入が必要なため、現実的ではありません。
• 等幅フォント: ズームするとテキストが歪み、スタイルのオプションが制限される可能性があります。

しかし、クロスブラウザの要件を満たす有望なソリューションが登場しました:

CSS ホワイト-space: pre-wrap

この CSS プロパティにより、不要な文字を追加したり HTML を無効にしたりすることなく、コンテナ内で長いテキストを折り返すことができます。以下でサポートされています:

• Chrome
• Firefox
• Opera
• Internet Explorer 5.5

使用法:

.wordwrap {
  white-space: pre-wrap;
}

この単純な実装により、「wordwrap」クラスを使用して任意の要素のワード ラップが有効になります。

注:

ワードラップが望ましくない場合は、「no_wordwrap」クラスを使用できます:

.no_wordwrap {
  word-wrap: normal;
}

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