preタグでテキストをラップするにはどうすればよいですか？

pre タグは、HTMLのコードブロックやスクリプトの作成中の出力のデバッグに非常に役立ちますが、1行の長い行を出力する代わりに、テキストをワードラップする方法を教えてください。

CSSのこのページからの答え：

pre {
    white-space: pre-wrap;       /* Since CSS 2.1 */
    white-space: -moz-pre-wrap;  /* Mozilla, since 1999 */
    white-space: -pre-wrap;      /* Opera 4-6 */
    white-space: -o-pre-wrap;    /* Opera 7 */
    word-wrap: break-word;       /* Internet Explorer 5.5+ */
}

これは、テキストを折り返し、pre-tag 内の空白を維持するのに最適です。

pre {
    white-space: pre-wrap;
}

preタグをスキップして空白を使用する：divのpre-wrapがより良い解決策であることがわかりました。

 <div style="white-space: pre-wrap;">content</div>

最も簡潔に言うと、これによりコンテンツは単語を壊さずに「pre」タグの内側にラップされます。乾杯！

pre {
  white-space: pre-wrap;
  word-break: keep-all
}

こちらのライブ例をご覧ください。

これが私が必要としたものです。それは単語が壊れないようにしましたが、前領域で動的な幅を許可しました。

word-break: keep-all;

私はプリを忘れて、それをテキストエリアに置くことをお勧めします。

インデントはそのまま残り、コードはパスまたは何かの途中でワードラップされません。

クリップボードにコピーする場合は、テキスト領域でテキスト範囲を選択するのも簡単です。

以下はphpの抜粋なので、phpを使用していない場合は、htmlの特殊文字をパックする方法が異なります。

<textarea style="font-family:monospace;" onfocus="copyClipboard(this);"><?=htmlspecialchars($codeBlock);?></textarea>

jsでクリップボードにテキストをコピーする方法については、JavaScriptでクリップボードにコピーする方法を参照してください。。

しかしながら...

私は単にstackoverflowコードブロックを調べて、それらがcssで<pre>タグでラップされた<code>タグでラップしています...

code {
  background-color: #EEEEEE;
  font-family: Consolas,Menlo,Monaco,Lucida Console,Liberation Mono,DejaVu Sans Mono,Bitstream Vera Sans Mono,Courier New,monospace,serif;
}
pre {
  background-color: #EEEEEE;
  font-family: Consolas,Menlo,Monaco,Lucida Console,Liberation Mono,DejaVu Sans Mono,Bitstream Vera Sans Mono,Courier New,monospace,serif;
  margin-bottom: 10px;
  max-height: 600px;
  overflow: auto;
  padding: 5px;
  width: auto;
}

また、stackoverflowコードブロックのコンテンツは、http：//code.google.com/p/google-code-prettify/を使用して構文を強調表示しています。

それは素晴らしい設定ですが、今のところ私はただtextareasを使います。

@richelectronと@ user1433454の回答を組み合わせました。
それは非常にうまく機能し、テキストのフォーマットを保持します。

<pre  style="white-space: pre-wrap; word-break: keep-all;">

</pre>

次のいずれかを行うことができます。

pre { white-space: normal; }

等幅フォントを維持しながらワードラップを追加するには、または：

pre { overflow: auto; }

これにより、長い行の水平スクロールで固定サイズが可能になります。

使ってみてください

<pre style="white-space:normal;">. 

またはより良いCSSを投げます。

white-space: pre-wrap内でpreの自動改行に使用するいくつかの接頭辞。

word-wrap: break-wordもちろんこれは単語を半分にするので使用しないでください。これはおそらくあなたが望まないものです。

Best Cross Browser Wayは、改行を取得して正確なコードまたはテキストを表示するために私に役立ちました：（chrome、インターネットエクスプローラー、Firefox）

CSS：

xmp{ white-space:pre-wrap; word-wrap:break-word; }

HTML：

<xmp> your text or code </xmp>

以下は私を助けました：

pre {
    white-space: normal;
    word-wrap: break-word;
}

ありがとう

<pre>-elementは、「プリフォーマットされたテキスト」の略で、そのタグの間のテキスト（または何でも）の書式設定を維持することを意図しています。したがって、実際に中に自動ワードラップや改行を持ってintededされていません<pre>-Tag

要素内のテキストは固定幅フォント（通常はCourier）で表示され、スペースと改行の両方が保持されます。

出典：w3schools.com、自分で作成したものに重点を置いています。