Shortening Flexbox content

Ingediend door admin op di, 05/12/2020 - 16:12

Malika tipped me on this one.

When shortening text in a flexbox  use:

.long-and-truncated {
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

When the flexbox has a child (h2) use:

.long-and-truncated-with-child {
    flex: 1;
    h2 {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
}

 

Labels