Bir ön etikete nasıl metin sarabilirim?

pre etiketleri HTML'deki kod blokları ve komut dosyaları yazarken çıktıları hata ayıklamak için çok kullanışlıdır, ancak uzun bir satır yazdırmak yerine metnin sözcük kaydırmasını nasıl yapabilirim?

CSS'deki bu sayfadan cevap :

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+ */
}

Bu, pre-tag içinde metni sarmak ve beyaz boşluğu korumak için harika çalışır :

pre {
    white-space: pre-wrap;
}

Ön etiketi atlamanın ve beyaz boşluk kullanmanın bir div üzerinde ön sarmanın daha iyi bir çözüm olduğunu buldum.

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

En özünde, bu, içeriği bir "ön" etiketinin içine sözcükleri kırmadan sarmaya zorlar. Şerefe!

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

Buradaki canlı örneğe bakın .

Buna ihtiyacım vardı. Kelimelerin kırılmasını engelledi, ancak ön alanda dinamik genişliğe izin verdi.

word-break: keep-all;

Ben ön unutmak ve sadece bir textarea koymak öneririz.

Girintilemeniz kalır ve kodunuz bir yolun veya başka bir şeyin ortasında kelime ile sarılmaz.

Panoya kopyalamak istiyorsanız, metin alanındaki metin aralığını seçmek daha kolaydır.

Aşağıdaki bir php alıntı yani sizin php değilse o zaman html özel karakter paketi şekilde değişir.

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

Js'de panoya metin kopyalama hakkında bilgi için bkz: JavaScript'te panoya nasıl kopyalayabilirim? .

Ancak...

Ben sadece stackoverflow kod blokları kontrol ve css ile <pre> etiketine sarılmış bir <code> etiketi sarın ...

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;
}

Ayrıca stackoverflow kod bloklarının içeriği (sanırım) http://code.google.com/p/google-code-prettify/ kullanılarak sözdizimi vurgulanır .

Bu güzel bir kurulum ama şimdilik sadece textareas ile gidiyorum.

@Richelectron ve @ user1433454 yanıtlarını birleştirdim.
Çok iyi çalışır ve metin biçimlendirmesini korur.

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

</pre>

Şunlardan birini yapabilirsiniz:

pre { white-space: normal; }

tek aralıklı yazı tipini korumak ancak word-wrap eklemek için veya:

pre { overflow: auto; }

uzun çizgiler için yatay kaydırma ile sabit bir boyuta izin verir.

Kullanmayı deneyin

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

Veya daha iyi bir CSS atın.

white-space: pre-wrapİçinde otomatik satır kesme için ve bazı önekler kullanın pre.

Kullanmayın word-wrap: break-wordçünkü bu, elbette, muhtemelen istemediğiniz bir şey olan bir kelimeyi ikiye böler.

En İyi Çapraz Tarayıcı Yolu satır sonları almak için çalıştı ve tam kodu veya metni gösteriyor: (chrome, internet explorer, Firefox)

CSS:

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

HTML:

<xmp> your text or code </xmp>

Aşağıdakiler bana yardımcı oldu:

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

Teşekkürler

<pre>-Eleman "önceden biçimlendirilmiş metin" anlamına gelir ve onun etiketleri arasındaki metin (ya da her neyse) biçimlendirmesi de tutmak için tasarlanmıştır. Bu nedenle aslında içinde otomatik kelime sarma veya satır sonu inteded değildir <pre>Etiketleme-

Bir öğedeki metin sabit genişlikli bir yazı tipinde (genellikle Courier) görüntülenir ve hem boşlukları hem de satır sonlarını korur .

kaynak: w3schools.com , kendim tarafından yapılan vurgulamaktadır.