Dlaczego moje elipsy przepełnienia są obcięte w Chrome?

Question

Przy pewnych szerokościach moje elipsy są obcięte. I've created a fiddle that demonstrates it. Próbowałem różnych kombinacji marginesu i dopełnienia, ale nie mogę tego wyeliminować. Używam Chrome 51.

Uwaga: Uprościliśmy mój przykład dla zwięzłości. Mój rzeczywisty div reaguje, a tekst jest dynamiczny. Potrzebuję rozwiązania, które będzie działać dla dowolnego tekstu o dowolnej szerokości.

Czy mogę obejść ten problem?

<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; 
} 

Answer 1

Emisja że stworzony na Chromium ale połączyła jako duplikat this issue, która następnie połączyła mnie jako duplikat this issue. Zaktualizuję tę odpowiedź, gdy status się zmieni.

AKTUALIZACJA: Problem NIE pojawia się w wersji Canary, więc najbliższa wersja Chrome powinna rozwiązać problem.

UPDATE 2: Problem został rozwiązany w Chrome 52.

Answer 2

Z jakiegoś powodu, że dokładnie 193px ten nie występuje, ale muszą być one w Chrome w sposób oblicza, jaka litera odcięcie go na. Użyj 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>

Answer 3

Jak inni już wspomniano, jest to błąd Chrome, ale można łatwo obejść dodając pewne dopełnienie padding-right: 4px.