JSFiddle - React, Tailwind, and code Playground

HTML

<div class="don_single_donatori">
  <div class="viewport">
    <div class="overview">
      <p><span>This is my full name which should be shortend</span><em>2.000,00 EUR</em></p>
      <p><span>Anonymous</span><em>2.000,00 EUR</em></p>
      <p><span>Anonymous</span><em>500,00 EUR</em></p>
      <p><span>This is another long name that needs shortening</span><em>2.000,00 EUR</em></p>
      <p>Anonymous<em>2.000,00 EUR</em></p>
    </div>
  </div>
</div>

CSS

.don_single_donatori {
  width: 250px;
  min-height: 310px;
}

.overview span {
  text-overflow: ellipsis;
  width: 100px;
  white-space: nowrap;
  overflow: hidden;
  display: inline-block;
}

.overview em {
  font-style: normal;
  color: #000;
  float: right;
}

.overview p span {
  overflow: hidden;
}

.overview p:hover > span {
  padding-bottom: 6px;
  overflow: visible;
}