JSFiddle - React, Tailwind, and code Playground

by illegs

HTML

<span class="css-truncate expandable">
  <span class="branch-ref css-truncate-target"><a href="http://www.yahoo.com">very long very long very long very long very long very long very long very long very long very long </a></span>
</span>

CSS

.css-truncate.css-truncate-target,
.css-truncate .css-truncate-target {
    display: inline-block;
    max-width: 125px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: top
}

.css-truncate.expandable.css-truncate-target,
.css-truncate.expandable.css-truncate-target,
.css-truncate.expandable:hover .css-truncate-target,
.css-truncate.expandable:hover.css-truncate-target {
    max-width: 10000px !important
}