Ellipsis xprmnt

by ShaCP

HTML

<div class="content_container">
<div class="content"><div class="date">Jul 22, 2011</div><div class="event">Text Text Text Text Text Text Text Text Text Text</div></div>
</div>

<div class="content_container two">
<div class="content"><div class="date">Jul 22, 2011</div><div class="event">Text Text Text</div></div>
</div>

CSS

.content_container {
  width: 50px;
}

.content {
    padding: 6px;
    max-width: 232px;
   position: absolute;
    font-size: 1.5rem;
    color: #476d83;
    white-space: nowrap;
    transition: 0.5s top, 0.5s bottom;
    background-color: white;
    box-shadow: 0 2px 5px rgb(0 0 0 / 16%), 0 2px 10px rgb(0 0 0 / 12%);
}

.content:hover {
    white-space: unset;
 /*    min-width: max-content; */
   /*  width: max-content; */
}

.event {
    text-overflow: ellipsis;
    overflow: hidden;
}

.content_container.two {
  position: 5rem;
}

/* .content {
    padding: 6px;
    max-width: 232px;
    position: absolute;
    font-size: 1.5rem;
    color: #476d83;
    white-space: nowrap;
    transition: 0.5s top, 0.5s bottom;
    background-color: white;
    box-shadow: 0 2px 5px rgb(0 0 0 / 16%), 0 2px 10px rgb(0 0 0 / 12%);
}

.content:hover {
    white-space: unset;
 min-width: max-content;
   width: max-content;
}

.event {
    text-overflow: ellipsis;
    overflow: hidden;
} */