Browserkompatibler Zeilenumbruch und Leerzeichen: vor?

Question

Ich brauche Text innerhalb eines div zu erhalten und zu wickeln. Bis jetzt habe ich es schwer, eine Lösung zu finden. Die beste Lösung, die ich gefunden habe, funktioniert nicht für alle Browser.

Folgendes funktioniert in Chrome und IE6 +, aber in Firefox ist der Text nicht umwickelt.

Ich habe festgestellt, dass aus irgendeinem Grund der Text nicht in Firefox mit white-Space: pre. Und -moz-pre-wrap funktioniert nicht in Firefox 3.5 (why ??), nur vor dem Wrap. Aber wenn ich Pre-Wrap zu der Liste hinzufügen, funktionieren IE 6 und 7 nicht. Sehr frustrierend.

Der Code:

.introsub { 
    position: relative; 
    top: 30px; 
    left: 25px; 
    width: 550px; 
    font-weight: normal; 
    line-height: 1.5em; 
    overflow: auto; 
    margin: 0; 
    padding: 1.5em; 
    white-space: pre; 
    word-wrap: break-word; 
} 

Answer 1

Die CSS3-Eigenschaften funktionieren nicht immer, wie wir sie möchten :) arbeiten. Noch sehe ich keinen Punkt in Mischen white-space:pre und word-wrap:break-word.

Ersteres wird den Text nur dann umbrechen, wenn ein <br />-Tag gefunden wird. Der zweite wird das Gegenteil tun: die Wörter brechen, wann immer es notwendig ist, sogar in der Mitte eines Wortes. Sie scheinen im Widerspruch zu sein, und die naheliegendsten Antworten, warum verschiedene Browser reagieren unterschiedlich auf diese Eigenschaften ist, dass

• sie eine der beiden Eigenschaften unterstützen
• , da sie in Konflikt sind, der Vorrang ist nicht definiert oder anders in jedem Browser

(Ich kann nicht sicher sein, obwohl, ich bin nicht wirklich ein Experte hier).

Ich schlage vor, Sie betrachten this und this genauer und entscheiden dann, was in Ihrem speziellen Fall verwendet werden sollte.

[EDIT]

Sie wollen könnte dies versuchen (sollte in allen Browsern):

white-space: -moz-pre-wrap; /* Firefox */ 
white-space: -pre-wrap; /* ancient Opera */ 
white-space: -o-pre-wrap; /* newer Opera */ 
white-space: pre-wrap; /* Chrome; W3C standard */ 
word-wrap: break-word; /* IE */ 

ich nicht getestet, aber ich glaube, es sollte den Trick für Sie tun.

Answer 2

Ich weiß, dass dies ein sehr altes Problem ist, aber da ich gerade darin gerannt bin, verspüre ich den Drang zu antworten.

Meine Lösung wäre:

Verwendung white-space: pre-wrap; wie es fast die gleiche wie white-space: pre; ist, kommt noch hinzu, Zeilenumbrüchen. (Referenz: http://www.quirksmode.org/css/whitespace.html)

Dann würde ich ziele speziell alten dh mit entweder bedingten Kommentaren (Referenz: http://www.quirksmode.org/css/condcom.html) oder mit Browser-spezifischem CSS-Hacks (http://paulirish.com/2009/browser-specific-css-hacks/).

Ein Beispiel für die zweite Methode:

.introsub { 
    position: relative; 
    top: 30px; 
    left: 25px; 
    width: 550px; 
    font-weight: normal; 
    line-height: 1.5em; 
    overflow: auto; 
    margin: 0; 
    padding: 1.5em; 
    white-space: pre-wrap; 
    word-wrap: break-word; 
} 

/* IE6 and below */ 
* html .introsub { white-space: pre } 

/* IE7 */ 
*:first-child+html .introsub { white-space: pre } 

Dies wird genug sein, um es zu zwingen, zu wickeln.