JSFiddle - React, Tailwind, and code Playground

by avrelian

HTML

<div class="ellipsis-container">
  <span class="ellipsis-breaking-text">Это текст, </span>
  <span class="ellipsis-cutting-text">Этот текст обрезается эллипсисом. При наведении на него он смещается вверх</span>
  <br>
  <span class="ellipsis-whole-text">Этот текст не обрезается. При наведении на него ничего никуда не смещается</span>
</div>

CSS

.ellipsis-container {
  max-width: 30ch;
  height: 1em;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ellipsis-breaking-text {
  word-break: break-all;
  background: magenta;
  line-height: 1em;
  max-height: 2em;
  overflow: hidden;
  display: block;
  margin-top:-2em;
}

.ellipsis-cutting-text {
  line-height: 1em;
  white-space: nowrap;
}

.ellipsis-whole-text {
  line-height: 1em;
  white-space: nowrap;
  background: yellow;
  padding: 0.5em;
  position: relative;
}

.ellipsis-container:hover {
  overflow: visible;
  text-overflow: initial;
}