Lynx
Guide
APIs
Blog
Contribute
Guide
APIs
Blog
Contribute

overflow

Introduction

The overflow property specifies whether to clip the content when the content of an element is too big.

CAUTION
  • It's recommended to set overflow: hidden explicitly, if the node is not need to be overflow; On Android platform, the re-drawn region may become larger than view‘s rect when overflow: visible.

Examples

css-apisrc/overflow/App.tsx
Preview

Syntax

overflow: visible;
overflow: hidden;

Values

  • visible(default) the content will not be clipped, the content and the descendants may render outside the element box

  • hidden the overflow of the content and the descendants will be clipped, the reset of the content will be visible

Formal definition

Initial valuevisible
Applies toall elements
Inheritedno
Animatableno

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: visible not work correctly, you can add overlap={false} to disable the offscreen rendering. The property is linked to Android View hasOverlappingRendering property.

Compatibility

LCD tables only load in the browser

Except as otherwise noted, this work is licensed under a Creative Commons Attribution 4.0 International License, and code samples are licensed under the Apache License 2.0.