Behalten Sie Zeilenumbrüche in HTML bei, aber umbrechen Sie den Text: möglich?

Question

Ich bin heute auf ein interessantes Problem gestoßen. Ich habe eine Text-E-Mail, die ich von einer Webseite sende. Ich zeige eine Vorschau an und wollte die Vorschau in eine feste Schriftart setzen, wobei der Leerraum beibehalten wird, da so die reine Text-E-Mail angezeigt wird.

Grundsätzlich möchte ich etwas, das wie Notepad: die Newlines wird ein Newline Signal, aber der Text wird andernfalls wickeln, um in den Container passen.

Leider erweist sich das als schwierig, es sei denn, ich vermisse etwas wirklich Offensichtliches. Ich habe es versucht:

1. CSS white-space: pre. Dadurch wird Leerraum beibehalten, jedoch werden Textzeilen nicht umbrochen, sodass sie bei langen Linien über die Rahmen hinausgehen.

2. Styling ein Textarea-Element nur gelesen werden, ohne Grenze so im Grunde Apepars wie ein div. Das Problem hier ist, dass IE 100% Höhen auf Textareas im strikten Modus nicht mag. Bizarrerweise ist es okay, wenn sie im Quirkmodus sind, aber das ist keine Option für mich.

3. CSS white-space: prewrap. Dies ist CSS 2.1, also wahrscheinlich nicht weit verbreitet (Ich bin glücklich, wenn es in IE7 und FF3 obwohl unterstützt wird; ich interessiere mich nicht für IE6 als dies ist eine Admin-Funktion und niemand wird IE6, die diese Seite verwenden wird laufen) .

Haben Sie noch weitere Vorschläge? Kann das wirklich so schwer sein?

bearbeiten: kann nicht kommentieren so mehr Info. Ja im Moment benutze ich Schriftart Courier New (zB feste Breite) und benutze einen Regex auf der Serverseite, um die Zeilenumbrüche durch <br> Tags zu ersetzen, aber jetzt muss ich den Inhalt bearbeiten und es fällt mir einfach unangenehm auf, dass du strippen musst aus und fügen Sie die <br> s hinzu, damit es funktioniert.

gibt es keinen besseren Weg?

Answer 1

Versuchen

selector { 
    word-wrap: break-word; /* IE>=5.5 */ 
    white-space: pre; /* IE>=6 */ 
    white-space: -moz-pre-wrap; /* For Fx<=2 */ 
    white-space: pre-wrap; /* Fx>3, Opera>8, Safari>3*/ 
} 

Answer 2

Vielleicht könnten Sie einen RichTextEditor (wie FreeTextBox) verwenden, um den Text anzuzeigen.

Stellen Sie die Schriftart des Editors zu Courier, sperren/verstecken die Symbolleisten, ...

Answer 3

Ersetzen Sie einfach Ihre harte Linie mit <br/> bricht und setzen Sie den Text in eine div mit der gewünschten Breite. Sie können dasselbe mit Leerzeichen machen: Ersetzen Sie sie durch  .

Stellen Sie sicher, dass Sie dies tun nach Sie die Sonderzeichen in HTML, sonst die
werden nicht interpretiert, sondern auf der Seite gedruckt.

Answer 4

einen <pre></pre> Tag erstellen oder so etwas wie
<p style="width:800px"> .... </p>

mit fester Breite verwenden, ich glaube, Text

Answer 5

gewickelten Versuchen Sie, doppelte Leerzeichen mit    ersetzen - der Arbeit sollte Ihr Aussehen Doppel machen Räume kommen durch.

Knacken Sie alle diese neuen Linie und tritt hart mit <br />.

Art die Textausgabe wie eine feste Breite mit dem font-family aussehen:

font-family:monospace; 

Sie Größe es richtig up benötigen, etwas kleiner ist als der umgebende Text, aber das gibt Sie das Aussehen eines PRE, und wie eine reine Text-E-Mail aussehen wird.

Setzen Sie alles in ein DIV mit einem festen mit und das könnte einen Blick wert sein.