Div 要素でクロスブラウザーのワードラップを実現するにはどうすればよいですか?

Div 内の拡張文字列のブラウザ間ワードラップ

Internet Explorer は独自のワードラップ スタイルを提供していますが、クロスdiv 内でテキストを折り返すためのブラウザー ソリューションは、一般的な懸念事項です。この記事では、この課題に対処するための CSS と JavaScript の両方の方法について説明します。

CSS のアプローチ

CSS には、div 内の長い文字列をワードラップするためのいくつかのオプションが用意されています。

/* Source: http://snipplr.com/view/10979/css-cross-browser-word-wrap */
.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 */
}

JavaScript アプローチ

ではありませんがCSS と同じくらいエレガントな JavaScript でも、ワードラッピングを実現できます。 1 つの方法は、wordwrap 関数を使用することです。

function wordwrap(str, width) {
  if (!width) { width = 80; }

  var re = new RegExp(".{" + width + "}(\s|$)|\S+\S{0," + (width - 1) + "}", "g");
  return str.match(re).join("\n");
}

Div への適用

いずれかの方法を div に適用するには、CSS で適切なコードを使用するか、またはJavaScript ファイルを開き、関連するクラスまたは ID を div 要素に割り当てます。

CSS の場合メソッド:

<div class="wordwrap">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam blandit mi nibh, id sagittis tellus maximus eget. Mauris ut pharetra est, eu mattis quam.
</div>

JavaScript メソッドの場合:

<div>

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