.truncate { text-overflow: unset; display: flex; flex-direction: row; align-items: baseline; position: relative; .truncate-link { display: flex; flex-direction: row; align-items: baseline; flex-shrink: 1; overflow: hidden; } .first { flex-grow: 0; flex-shrink: 1; overflow: hidden; text-overflow: ellipsis; } .last-four { flex-shrink: 0; flex-grow: 0; } &.inline { display: inline-flex; } .hidden-content { color: transparent; position: absolute; max-width: 300px; overflow: hidden; } } @media (max-width: 567px) { .hidden-content { max-width: 150px !important; } }