š„ Someone on reddit posted a demo where CSS truncates text from the middle. They didn't post the code, so here is my shot at it with Flexbox.
Super handy for GUIDs or other long strings that you want to truncate from the middle.
<p class="truncate-text"><span>2brb5e796-6c5e-4bc4-871b-f3afd469</span><span>-1c1e</span></p>
<p class="truncate-text"><span>2bb5e796-6c5e-4bc4-871b-</span><span>f3af-d469-1c1e</span></p>
<p class="truncate-text"><span>2bb5e796-6c5e-4bc4</span><span>-871b-f3af-d469-1c1e</span></p>
.truncate-text {
max-width: 100%;
white-space: nowrap;
overflow: hidden;
border: 1px solid #000;
padding: 0 10px;
border-radius: 5px;
display: flex;
span {
overflow: hidden;
flex: 0 1 auto;
}
span:nth-child(1) {
flex-shrink: 1;
background: red;
text-overflow: ellipsis;
}
span:nth-child(2) {
background: green;
min-width: fit-content;
flex: 1;
}
}
Jesus Christ 