Div 要素でクロスブラウザーのワードラップを実現するにはどうすればよいですか?-CSSチュートリアル-php.cn

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

Linda Hamilton

リリース： 2024-12-07 10:16:13

オリジナル

507 人が閲覧しました

How Can I Achieve Cross-Browser Word Wrapping in a Div Element?

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 メソッドの場合: