Text overflow entire strings if part of the string is hidden?

Question

Given both these emails "Example@example.com" and "Blahblahblahblah@example.com". While displaying them both in a table if both emails can't be displayed fully then they are clipped in their entirety. So "Example@example.com, Blahblahblahblah@ex..." is supposed to be cut down to "Example@example.com, ..."

Answer 1

You're looking for text-overflow: ellipsis:

div{
  width:300px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

<div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit
</div>