Wie verwendet man automatische CSS Bindestriche mit `word-break: break-all`?

Ich benutze word-break: break-all; und möchte wissen, wie ich den Browser automatisch die hyphens einfügen kann, wie in einem MDN example demonstriert.Wie verwendet man automatische CSS Bindestriche mit `word-break: break-all`?

div { 
 
    width: 80px; 
 
    height: 80px; 
 
    display: block; 
 
    overflow: hidden; 
 
    border: 1px solid red; 
 
    word-break: break-all; 
 
    hyphens: auto; 
 
    -ms-hyphens: auto; 
 
    -moz-hyphens: auto; 
 
}

<div>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div>

Derart, dass der Text würde wie folgt aussehen:

aaaaaaaa- 
aaaaaaaa- 
aaaaaaaa- 
aaaaaaaa

Ich habe einen zu JSFiddle.

Dies muss in IE9/IE10 funktionieren, aber es wäre schön, wenn es auch in Firefox und Chrome funktionieren würde.

Quelle

2013-03-07 chovy

Die Eigenschaft -ms-hyphens funktioniert nur in IE10 +. Im IE9 oder darunter ist das nicht möglich.

Weitere Informationen finden Sie in der Browserkompatibilitätstabelle am unteren Rand des von Ihnen bereitgestellten Referenzlinks.

Es funktioniert noch nicht in Chrome: WebKit Hyphenation

Quelle

2013-03-07 02:01:47

Ab 2015 ist die Welt noch nicht bereit für css-Hyphen: http://caniuse.com/#feat=css-hyphens –

Bindestriche eingefügt werden, wenn der Browser & Sprache enthält einen hyphenation Wörterbuch unterstützt. Aber Ihre

aaaaaaaaaaaaaaaaaa

ist in einem Wörterbuch nicht.

Deshalb müssen Sie wie für weiche Bindestriche gehen in https://jsfiddle.net/LJYj3/5/

Hier ist mehr zu denken: https://stackoverflow.com/a/856322/1696030

Quelle

2013-03-07 02:05:30

Können Sie erklären, wie das jsfiddle funktioniert? Wo soll ich die einfügen? – user1380540

@ user1380540 Sie können einen '' einfügen, wo immer Sie es für angebracht halten, einen Worttrennstrich manuell zu trennen. –

Die word-break Eigenschaft und hyphenation sind zwei völlig verschiedene Dinge. Die erste, die ursprünglich hauptsächlich für ostasiatische Sprachen gedacht war, tut den Sprachen wie Englisch schade: Sie schneidet willkürlich an einigen Stellen ab, ohne zu zeigen, dass ein Wort gebrochen ist.

Sie sollten also entscheiden, ob Sie einen Ausdruck haben, wo ein Zeilenumbruch von einem Browser an beliebiger Stelle eingefügt werden kann oder ob Sie Silbentrennung wünschen.

Für die Silbentrennung ist der CSS-Code als solcher in Ordnung, obwohl viele Leute empfehlen würden, die Standardeigenschaftseinstellung hyphens: auto nach den vorangestellten Eigenschaften zu setzen. Es erfordert jedoch, dass die Sprache des Textes in HTML-Markup deklariert wird, wobei z.B. <div lang=en>. Außerdem ist die Browser-Unterstützung immer noch begrenzt: IE 9 unterstützt keine solche Silbentrennung, und die Unterstützung in IE 10 deckt eine relativ kleine Anzahl von Sprachen ab (einschließlich natürlich Englisch).

Für die automatische Silbentrennung auf IE 9 müssen Sie entweder die serverseitige programmierte Silbentrennung oder, einfacher, clientseitige Silbentrennung mit Tools wie Hyphenator.js verwenden.

Quelle

2013-03-07 04:47:18

Wie verwendet man automatische CSS Bindestriche mit `word-break: break-all`?

Antwort

Verwandte Themen