Jak zawinąć tekst we wstępny tag?

pre tagi są bardzo przydatne dla bloków kodu w HTML i do debugowania danych wyjściowych podczas pisania skryptów, ale jak zrobić zawijanie tekstu tekstu zamiast drukowania jednej długiej linii?

Odpowiedź z tej strony w 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+ */
}

Działa to świetnie, aby zawijać tekst i utrzymywać białe preznaki w -tag:

pre {
    white-space: pre-wrap;
}

Przekonałem się, że pominięcie tagu wstępnego i użycie spacji: wstępne zawinięcie na div jest lepszym rozwiązaniem.

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

Mówiąc najkrócej, wymusza to zawijanie zawartości do tagu „przed” bez rozbijania słów. Twoje zdrowie!

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

Zobacz przykład na żywo tutaj .

Właśnie tego potrzebowałem. Chronił słowa przed łamaniem, ale pozwalał na dynamiczną szerokość w obszarze wstępnym.

word-break: keep-all;

Radzę zapomnieć o wersji wstępnej i po prostu umieścić ją w polu tekstowym.

Twoje wcięcie pozostanie, a kod nie zostanie zawinięty na środku ścieżki lub czegoś takiego.

Łatwiej jest również wybrać zakres tekstu w obszarze tekstowym, jeśli chcesz skopiować do schowka.

Poniżej znajduje się fragment php, więc jeśli nie jesteś w php, sposób pakowania specjalnych znaków HTML będzie się różnić.

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

Aby uzyskać informacje na temat kopiowania tekstu do schowka w js, zobacz: Jak skopiować do schowka w JavaScript? .

Jednak...

Właśnie sprawdziłem bloki kodu stackoverflow i zawijają one znacznik <code> owinięty znacznikiem <pre> za pomocą css ...

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

Również zawartość bloków kodu przepływu stosu jest podświetlona przy użyciu (chyba) http://code.google.com/p/google-code-prettify/ .

To niezła konfiguracja, ale na razie korzystam z obszarów tekstowych.

Połączyłem @richelectron i @ user1433454 odpowiedzi.
Działa bardzo dobrze i zachowuje formatowanie tekstu.

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

</pre>

Możesz albo:

pre { white-space: normal; }

aby zachować czcionkę monospace, ale dodaj zawijanie wyrazów lub:

pre { overflow: auto; }

co pozwoli na stały rozmiar z przewijaniem w poziomie dla długich linii.

Spróbuj użyć

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

Lub lepiej rzuć CSS.

Użyj white-space: pre-wrapi niektóre prefiksy do automatycznego łamania linii w pres.

Nie używaj, word-wrap: break-wordponieważ to po prostu oczywiście dzieli słowo na pół, co jest prawdopodobnie czymś, czego nie chcesz.

Najlepszy sposób na przeglądarkę działał dla mnie, aby uzyskać podział linii i wyświetlać dokładny kod lub tekst: (chrome, Internet Explorer, Firefox)

CSS:

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

HTML:

<xmp> your text or code </xmp>

Pomogło mi:

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

Dzięki

<pre>-Elementowe oznacza „wstępnie sformatowanego tekstu” i ma na celu zachować formatowanie tekstu (lub cokolwiek) pomiędzy jej tagów. Dlatego tak naprawdę nie jest zamierzone automatyczne zawijanie słów lub łamanie linii w <pre>-Tag

Tekst w elemencie jest wyświetlany czcionką o stałej szerokości (zwykle Courier) i zachowuje zarówno spacje, jak i podziały linii .

źródło: w3schools.com , podkreśla wykonane przeze mnie.