overflow-x#

#Introduction

The overflow-x property specifies whether to clip the content when it overflows at the left and right edges.

#Examples

css-apisrc/overflow-x/App.tsx

Code

Preview

#Syntax

overflow-x: visible;
overflow-x: hidden;

#Values

• visible(default) the content will not be clipped, the content and the descendants may render outside the left and right edges.

• hidden the overflow of the content and the descendants will be clipped at the left and right edges.

#Formal definition

#Formal syntax

hidden | visible

#Difference from Web

• overflow does not contain scroll and auto, for scroll please use <scroll-view> directly.

#Notes

• On Android platform, the Android view that has opacity < 1 will be rendered in an offscreen buffer by default, the offscreen makes the overflow-x :visible not work correctly, you can add overlap={false} to disable the offscreen rendering. The property is linked to Android View hasOverlappingRendering property.

#Compatibility