Warum werden meine Überlaufellipsen in Chrome abgeschnitten?

Bei bestimmten Breiten werden meine Ellipsen abgeschnitten. I've created a fiddle that demonstrates it. Ich habe verschiedene Kombinationen von Rand und Padding ausprobiert, kann sie aber nicht eliminieren. Ich verwende Chrome 51.

Hinweis: Ich habe mein Beispiel der Kürze halber vereinfacht. Mein aktuelles div reagiert, und der Text ist dynamisch. Ich brauche eine Lösung, die für jeden Text in jeder Breite funktioniert.

Gibt es eine Möglichkeit, um dieses Problem zu umgehen?

<div class="container"> 
    <div class="nowrap">This text should be truncated</div> 
</div> 

<div class="container two"> 
    <div class="nowrap">This text should be truncated</div> 
</div>

.container{ 
    width:196px; 
    font-size:30px; 
} 

.container.two{ 
    width:193px; 
} 

.nowrap{ 
    text-overflow: ellipsis; 
    white-space:nowrap; 
    overflow:hidden; 
}

Quelle

2016-06-06 adamdport

Anscheinend ist es ein Fehler. –

Wenn es ein Fehler ist, hat jemand einen Link, wo ich ihm folgen kann? – adamdport

Ist das nicht was Ellipse oder fehlt mir etwas? – JakobMillah

Das Problem, das ich auf Chromium erstellt wurde als Duplikat von this issue verschmolz, die dann als Duplikat von this issue verschmolzen wurde. Ich werde diese Antwort aktualisieren, wenn sich der Status ändert.

UPDATE: Das Problem wird nicht in Canary angezeigt, sodass eine baldige Veröffentlichung von Chrome das Problem beheben sollte.

UPDATE 2: Das Problem in Chrome 52

Quelle

2016-06-09 18:49:30 adamdport

-1

Aus irgendeinem Grund, dass genau 193px dies auftritt, muss ein aber in Chrome sein in sie Art und Weise berechnet er welchen Buchstaben es abzuschneiden an. Verwenden Sie 192px.

.container { 
 
    width:196px; 
 
    font-size:30px; 
 
} 
 

 
.container.two { 
 
    width:192px; 
 
} 
 

 
.nowrap{ 
 
    text-overflow: ellipsis; 
 
    white-space:nowrap; 
 
    overflow:hidden; 
 
}

<div class="container"> 
 
    <div class="nowrap">This text should be truncated</span> 
 
</div> 
 

 
<div class="container two"> 
 
    <div class="nowrap">This text should be truncated</span> 
 
</div>

Quelle

2016-06-07 12:17:17

Ich habe mein Problem für die Kürze vereinfacht, in der realen Welt reagiert mein Design. Ich brauche es für jede Breite zu arbeiten. Ich habe meine Frage aktualisiert, um das zu berücksichtigen. – adamdport

Dann weiß ich nicht, dass es eine andere Lösung gibt, als nur den Fehler in Chrome zu melden und darauf zu warten, dass es repariert wird. Oder machen Sie etwas Phantasie JS, um sicherzustellen, dass die Breite immer in Schritten von 4 ist. –

Der Text ist auch dynamisch, und so würde sogar der 4er-Trick nicht funktionieren. Danke trotzdem. Ich habe Chrom einen Fehlerbericht geschickt, wir werden sehen, was sie sagen. – adamdport

Wie andere haben bereits darauf hingewiesen, gelöst wurde, ist dies ein Chrome Fehler, aber Sie können, indem Sie einige padding padding-right: 4px um es einfach zu arbeiten.

Quelle

2017-05-09 01:10:18 Joshua

Warum werden meine Überlaufellipsen in Chrome abgeschnitten?

Antwort

Verwandte Themen