Zeilenumbruch nach Bindestrich

Question

Beim Ausführen des folgenden Snippets auf FF 45 zeigt das erste der beiden Felder nur eine einzige Zeile wie "ThisIsATest ...", während das zweite Feld zwei Zeilen mit dem gesamten Text durch den Bindestrich getrennt zeigt . In Chrome und Edge zeigen beide Felder zwei Zeilen an. Meine Frage: Wie kann ich den Text in der ersten Pause nach dem Bindestrich in FF machen? Offensichtlich hat es etwas mit der Länge des folgenden Textes zu tun, aber was ist der Grund dafür?

.test { 
 
    width: 100px; 
 
    overflow: hidden; 
 
    text-overflow: ellipsis; 
 
    background: #00bcd4; 
 
    margin-bottom: 1rem; 
 
}

<div class="test"> 
 
    ThisIsATest-Test 
 
</div> 
 

 
<div class="test"> 
 
    ThisIsATest-Test123 
 
</div>

Ich möchte dieses Verhalten erreichen (die bereits in Chrome und Edge-Werke): Wenn der Text keine Bindestriche oder Leerzeichen enthält, kann es nicht brechen und die Show“. .. ". Wenn der Text ein Leerzeichen oder einen Bindestrich enthält, brechen Sie ihn gegebenenfalls ab.

Update: Auslassungszeichen und ein ähnliches Ergebnis erhalten:

Sie können Text-Überlauf entfernen. Jetzt wird der Text manchmal abgeschnitten, manchmal wird eine neue Zeile angezeigt. Ich sehe keinen Grund, warum zwei ähnliche divs (eines mit etwas mehr Inhalt) ein so unterschiedliches Verhalten zeigen sollten.

.test { 
 
    width: 100px; 
 
    overflow: hidden; 
 
    background: #00bcd4; 
 
    margin-bottom: 1rem; 
 
}

<div class="test"> 
 
    ThisIsATest-Test 
 
</div> 
 

 
<div class="test"> 
 
    ThisIsATest-Test123 
 
</div>

In FF 45.0.1 unter Windows 10, es sieht derzeit wie folgt aus:

Answer 1

Wenn es sich um eine "echte" Bindestrich (dh ist, wenn Sie don‘ t muss das "-" angezeigt werden, wenn alles in eine Zeile passt, können Sie das Element "Soft Bindestrich" ­:

verwenden

ThisIsATest­Test 

Answer 2

Fügen Sie die Eigenschaften word-wrap: break-word; oder white-space: nowrap; zu Ihrer Testklasse hinzu und beide Divs werden das gleiche Verhalten erzeugen.

Zum Beispiel:

word-wrap: break-word;

Erzeugt zwei Zeilen.

.test { 
 
    width: 100px; 
 
    overflow: hidden; 
 
    word-wrap: break-word; 
 
    text-overflow: ellipsis; 
 
    background: #00bcd4; 
 
    margin-bottom: 1rem; 
 
}

<div class="test"> 
 
    ThisIsATest-Test 
 
</div> 
 

 
<div class="test"> 
 
    ThisIsATest-Test123 
 
</div>

white-space: nowrap;

Erzeugt eine Zeile mit Auslassungspunkten.

.test { 
 
    width: 100px; 
 
    overflow: hidden; 
 
    white-space: nowrap; 
 
    text-overflow: ellipsis; 
 
    background: #00bcd4; 
 
    margin-bottom: 1rem; 
 
}

<div class="test"> 
 
    ThisIsATest-Test 
 
</div> 
 

 
<div class="test"> 
 
    ThisIsATest-Test123 
 
</div>

Answer 3

fand ich diesen Trick auf dieser blog, aber ich weiß nicht, ob das Problem behoben wird.

.test { 
 
    width: 100px; 
 
    overflow: hidden; 
 
    text-overflow: ellipsis; 
 
    background: #00bcd4; 
 
    margin-bottom: 1rem; 
 

 
    -ms-word-break: break-all; 
 
    word-break: break-all; 
 

 
    word-break: break-word; 
 

 
    -webkit-hyphens: auto; 
 
    -moz-hyphens: auto; 
 
    -ms-hyphens: auto; 
 
    hyphens: auto; 
 
}

<div class="test"> 
 
    ThisIsATest-Test 
 
</div> 
 

 
<div class="test"> 
 
    ThisIsATest-Test123 
 
</div>