Wie zu imitieren, Wort-break: break-word; für IE9, IE11 und Firefox

Wie zu imitieren word-break: break-word; für IE9, IE11 und Firefox?

Scheint es zu funktionieren in Chrome. Ich habe gelernt und verstanden, dass es ein nicht-standard-webkit nur.

FYI, ich habe versucht mit,

white-space: pre-wrap;

Und einige mehr wie,

   overflow-wrap: break-word;

Habe auch versucht, die unten genannten CSS,

 word-wrap:  break-word;
 word-break: break-word;

Aber diese scheinen nicht zu funktionieren.

Kann ich nicht bieten Feste Breite der Spannweite(die den text enthält), indem Sie es display: block; explizit als der text ist dynamisch und wird je nach Anwender-Geo-location. Derzeit unterstützen wir rund 18 Sprachen.

Dies ist, wie der code aussieht,

Html,

<div id="grid2">
     <span id="theSpan">Product Support</span>
</div>

CSS,

#theSpan{
   white-space: pre-wrap;      /* CSS3 */   
   white-space: -moz-pre-wrap; /* Firefox */    
   white-space: -pre-wrap;     /* Opera 7 */   
   white-space: -o-pre-wrap;   /* Opera 7 */    
   word-wrap: break-word;      /* IE */
   word-break: break-all;
}

#grid2{
   width: 100px;
}

Sieht es so aus,

Wie zu imitieren, Wort-break: break-word; für IE9, IE11 und Firefox

Ich will es so,

Wie zu imitieren, Wort-break: break-word; für IE9, IE11 und Firefox

Bitte beachten Sie:
Ich musste word-break: break-all; für Einige der Sprachen, die übersetzt, text ist zu lang und es läuft aus dem Netz. Der text 'Produkt-Support' ist dynamisch.

Update:
Ich habe eine Feste Breite für das div mit der id, grid2. In einer der Sprachen der übersetzte text ist zu lang, es ist ein Einziges Wort, und es fließt aus der grid2 div.

Aktualisiert den code zu.

Können Sie fügen Sie eine einfache live-demo bitte? Denn es gibt keine Notwendigkeit, eine beliebige word-break-Regeln für das aktuelle Beispiel oben denke ich.
ja, für diesen speziellen grid-ich verstehe es ist nicht erforderlich, aber problem entsteht, wenn ich ein langes Wort-in einem der Netze, wobei der text im span-überläufe aus den div. Vielen Dank für Ihren Vorschlag. Wird eine demo und informieren Sie in Kürze.

InformationsquelleAutor Sudhansu Choudhary | 2015-12-30

10

Ich hatte guten Erfolg in Chrome, Firefox und IE mit Hilfe von nur:
```
word-break: break-word;
word-wrap: break-word;
```
In mein problem Fall, ich war ja schon mit:
```
display: table-cell;
```
und ich landete mit einbeziehen
```
max-width: 440px;
```
bekommen einwickeln in allen Browsern. In den meisten Fällen die max-width nicht nötig war.

Wort-break: break-word; funktioniert nur für blink/webkit so nicht funktioniert im IE11 für mich

InformationsquelleAutor Darren Reimer
1

Verwenden display:table-caption zu erreichen, was Sie suchen.

LIVE-DEMO

HTML:
```
<div id="grid2">
     <span id="theSpan">Product Support</span>
</div>
```
Der CSS:
```
#theSpan{
  display:table-caption;
}
```
Hoffe, das hilft.

hey, habe vergessen zu erwähnen, eine Sache, ich habe eine Feste Breite für das div mit der id grid2. In einer der Sprachen der übersetzte text ist zu lang, es ist ein Einziges Wort, und es fließt aus der grid2 div. Ich werde zu aktualisieren, die Frage, wie gut. Danke für deine Antwort.
Wie pro Ihre Frage, meine obige Antwort werden die gleichen break-word Wirkung, die Sie suchen. Auch wenn Sie eine Feste Breite, die Charaktere würde gebrochen werden, wie Sie gewünscht haben.
Ich verstehe, es ist ein Problem, wenn der text ein einzelnes Wort ist und zu lang ist, für eine Sprache es ist. In diesem Fall wird der text in der span fließt aus den div durch die Feste Breite des div.
Das ist offensichtlich 🙂
mit Chrome funktioniert es einwandfrei, wenn ich word-break: break-word; auch für sehr lange single word-text. Amüsant!

InformationsquelleAutor Nitesh

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.