異なるブラウザ間で長い単語を Div で確実にラップするにはどうすればよいですか?

Div で長い単語を折り返す: クロスブラウザー ガイド

Internet Explorer ではワードラップ スタイルが提供されていますが、個人は単語のクロスプラットフォーム ソリューションを求める場合があります。 -長い文字列を div 内でラップします。この記事では、この目的を達成するために CSS と JavaScript の両方のメソッドについて説明します。

CSS メソッド:

CSS には、ワード ラップを有効にするいくつかのプロパティが用意されています。次のスニペットは、ほとんどのブラウザで動作します:

.wordwrap {
  white-space: pre-wrap;      /* CSS3 */
  white-space: -moz-pre-wrap; /* Firefox */
  white-space: -pre-wrap;     /* Opera <7 */
  white-space: -o-pre-wrap;   /* Opera 7 */
  word-wrap: break-word;      /* IE */
}

テキストを含む div に wordwrap クラスを適用すると、ブラウザは利用可能な幅に合わせて長い単語を自動的に折り返します。

JavaScript メソッド:

CSS がオプションでない場合は、JavaScript を使用してワードラップをシミュレートすることもできます。 1 つのアプローチには、span 要素で各文字を個別にラップすることが含まれます。

function wrapWords(div) {
  var text = div.innerHTML;
  var wrappedText = "";
  for (var i = 0; i < text.length; i++) {
    wrappedText += "<span>" + text[i] + "</span>";
  }
  div.innerHTML = wrappedText;
}

この関数は文字を反復処理して、各文字のスパンを作成し、ラップされたテキストを div に挿入し直します。

以上が異なるブラウザ間で長い単語を Div で確実にラップするにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。