JSFiddle - React, Tailwind, and code Playground

by Max Sinev

HTML

<div class="qwe-wrp">
  <div class="qwe">
Очень-очень длинный текст Очень-очень длинный текст Очень-очень длинный текст Очень-очень длинный текст Очень-очень длинный текст
  </div>
  <div class="qwe-ext">
    Очень-очень длинный текст Очень-очень длинный текст Очень-очень длинный текст Очень-очень длинный текст Очень-очень длинный текст
  </div>
</div>

CSS

body {
}
.qwe {
  width: 100%;
  text-overflow: ellipsis;
  display: inline-block;
  white-space: nowrap;
  overflow: hidden;
  width: 300px;
}

button {
  margin-left: 30px;
}

.qwe-wrp {
  position: relative;
}

.qwe-wrp:hover .qwe-ext {
  display: block;
}

.qwe-wrp:hover .qwe {
  opacity: 0;
}

.qwe-ext {
  position: absolute;
  top: 0;
  left: 0;
  display: none;
}