Ich benutze "word-break: break-all", um Pausen zwischen beliebigen Zeichen einzufügen.
In Chrome funktioniert es jedoch erwartungsgemäß nicht mit bestimmten Zeichen (z. B. Doppelpunkt, Semikolon, Komma) wie unten.
(My codepen ist hier: https://codepen.io/yukito/pen/wobZJq)CSS-Eigenschaft "word-break: break-all" funktioniert nicht erwartet mit bestimmten Zeichen in Chrome

Quellcode:

<style> 
    .test { 
    width: 300px; 
    word-break: break-all; 

    /* cosmetic */ 
    background-color: red; 
    margin-bottom: 5px; 
    } 
</style> 

<div class="test"> 
++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ 
</div> 

<div class="test"> 
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;; 
</div>

In FireFox und Safari, es erwartungsgemäß funktioniert.

Meine Fragen:
. Ist es ein Fehler? oder eine Spezifikation?
. Wie unterbreche ich Zeilen zwischen fortlaufenden Semikola in Chrome?

Vielen Dank.

Update:

"break-word" Pausen Linie unter Berücksichtigung Wortgrenzen wie dieser Stift: https://codepen.io/yukito/pen/xRNopJ
Ich mag wirklich Pausen zwischen beliebigen Zeichen einzufügen, ohne Wortgrenzen unter Berücksichtigung.

Quelle

2016-12-26 yukito

Der Code-Link funktioniert sowohl in Chrome als auch in Firefox. – aavrug

@aavrug Es funktioniert nicht für mich in Opera, und die Lösung, die ich unten gepostet habe, scheint es zu beheben. – sol

Für Webkit-Browser, müssen Sie hinzufügen:

.test { 
     word-break: break-word; 
    }

Demo

Quelle

2016-12-26 10:02:19 sol

Thx. Aber "break-word" bricht die Zeile mit Wortgrenzen wie diesen Stift: https://codepen.io/yukito/pen/wobZJq. Ich möchte wirklich Pausen zwischen beliebigen Zeichen einfügen, ohne Wortgrenzen zu berücksichtigen. – yukito

Ich denke, der Grund dafür, dass das Wort "test" in einer eigenen Zeile erscheint, könnte sein, dass Sie eine neue Zeile hinterher hinzugefügt haben. Sehen Sie die zweite Box hier: https://codepen.io/sol_b/pen/LboKGr - oder missverstehe ich Sie? – sol

Verwenden break-word Eigenschaft statt break-all.

Werfen Sie einen Blick auf das Snippet unten:

<style> 
 
    .test { 
 
    width: 300px; 
 
    word-break: break-word; 
 
    
 
    /* cosmetic */ 
 
    background-color: red; 
 
    margin-bottom: 5px; 
 
    } 
 
</style> 
 

 
<div class="test"> 
 
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ 
 
</div> 
 

 
<div class="test"> 
 
;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;; 
 
</div>

hoffe, das hilft!

Quelle

2016-12-26 10:04:26

CSS-Eigenschaft "word-break: break-all" funktioniert nicht erwartet mit bestimmten Zeichen in Chrome

Update:

Antwort

Verwandte Themen