Perché le mie ellissi di overflow vengono troncate in Chrome?

Question

A determinate larghezze, le mie ellissi vengono tagliate. I've created a fiddle that demonstrates it. Ho provato diverse combinazioni di margini e padding, ma non riesco a eliminarlo. Utilizzo Chrome 51.

Nota: ho semplificato il mio esempio per brevità. Il mio div attuale è reattivo e il testo è dinamico. Ho bisogno di una soluzione che funzioni per qualsiasi testo a qualsiasi larghezza.

C'è un modo per aggirare questo problema?

<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

Il problema che ho creato su Chromium preso fusi come un duplicato di this issue, che poi si è fusa come un duplicato di this issue. Aggiornerò questa risposta quando lo stato cambia.

AGGIORNAMENTO: Il problema NON viene visualizzato in Canary, pertanto è necessario che la prossima release di Chrome risolva il problema.

UPDATE 2: Il problema è stato risolto in Chrome 52.

Answer 2

Per qualche ragione che esattamente 193px si verifica ciò, deve essere un ma in Chrome in essi modo esso calcola quale lettera tagliarlo ad. Utilizzare 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

Come altri hanno già fatto notare, si tratta di un bug Chrome, ma si può facilmente aggirare con l'aggiunta di un po 'di imbottitura padding-right: 4px.