Overflow

4 examples from SAP's documentation · no stylesheet in the package · Back to the gallery

About

The overflow property controls what happens to content that is too big to fit into an area. The following values are available: visible: default value. The overflow is not clipped and the content renders outside the element's box hidden: the overflow is clipped to fit into the area, and the rest of the content will be hidden scroll: the overflow is clipped, and a scrollbar is added to see the rest of the content auto: the overflow is not clipped, scrollbars are added only when necessary

OverflowVisible

For overflow visible use: .sap-overflow-visible, .sap-overflow-x-visible or .sap-overflow-y-visible classes.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

OverflowHidden

For overflow hidden use: .sap-overflow-hidden, .sap-overflow-x-hidden or .sap-overflow-y-hidden classes.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

OverflowScroll

For overflow scroll use: .sap-overflow-scroll, .sap-overflow-x-scroll or .sap-overflow-y-scroll classes.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

OverflowAuto

For overflow auto use: .sap-overflow-auto, .sap-overflow-x-auto or .sap-overflow-y-auto classes.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.