.cropped-text {
    width: 100%;
    overflow: hidden;
    display: inline-flex;
    flex-wrap: nowrap;
    position: relative;
    line-height: normal;

    .whole {
        position: absolute;
        top: 0;
        left: 0;
        color: transparent;
        white-space: nowrap;
    }

    .front {
        flex-grow: 0;
        flex-shrink: 1;
        flex-basis: content;
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: pre;
        user-select: none;
    }

    .back {
        flex-grow: 0;
        flex-shrink: 1;
        flex-basis: content;
        overflow: hidden;
        user-select: none;

        span {
            float: right;
            white-space: pre;
        }
    }
}
