ellipsis

by jpeter06

HTML

<div class="inlineFlex">
  </span>
    <span class="overflow" style="float: left; width: 50px">
    <span>Long text that might overflow.</span>
  </span>
  <span class="ellipsis">
  asdasfd asdasdf asdfadfs asdasdf asdfadfs asdasdf 
  </span>
  <span class="ellipsis">
  asdasfd asdasdf asdfadfs asdasdf asdfadfs asdasdf 
</div>

CSS

.inlineFlex{ 
  display: flex;
  align-items: center;
  gap:1rem;
  padding: 10px;
  margin: 30px 0;  
}
.ellipsis{
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.overflow {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.overflow:hover {
  overflow: visible;
}

.overflow:hover span {
  position: relative;
  background-color: tan;
}