samedi 11 juin 2016

Why are my overflow ellipses being cut off in Chrome?


enter image description here

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