Showing truncated text on hover using CSS ellipsis overlaps text

by Amin Kodaganur

HTML

<div class="truncated" title="This is a long text that will be truncated, but showed on hover">
  This is a long text that will be truncated, but shown on hover
</div>

CSS

.truncated {
  white-space: nowrap; 
  overflow: hidden;
  text-overflow: ellipsis; 
  /* Optional: set a fixed max-width or width to the element if needed */
  max-width: 200px; /* max-width: 100%; also works */
}