Css

Met css bedoel ik ook scss en alles wat er mee samen valt.

Een goede bron voor informatie is MDN web docs

Shortening Flexbox content

Submitted by admin on Tue, 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;
    }
}

 

Tags

CSS Flexible Box Layout

Submitted by admin on Tue, 05/12/2020 - 16:12
CSS Flex is all about having items flow into a container. CSS Flex is bias to working horizontally or vertically. Items can be place in one direction and still wrap to new rows/columns with: flex-wrap: wrap. Space can be divided in several ways using content-justify. Width is set with flex-basis instead of width. The order can be changes with... order. When working in rows, the height of items on the same row will be equal by default, unless you specify align-items with flex-start or flex-end.

Tags