At certain widths, my ellipses are being cut off. I've created a fiddle that demonstrates it. I've tried different combinations of margin and padding, but cannot seem to eliminate it. I'm using Chrome 51.
Note: I've simplified my example for brevity. My actual div is responsive, and the text is dynamic. I need a solution that will work for any text at any width.
Is there any way I can get around this issue?
<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;
}
Aucun commentaire:
Enregistrer un commentaire