.overflow-auto
|
overflow: auto;
|
.overflow-hidden
|
overflow: hidden;
|
.overflow-scroll
|
overflow: scroll;
|
.overflow-visible
|
overflow: visible;
|
.overflow-x-auto
|
overflow-x: auto;
|
.overflow-x-hidden
|
overflow-x: hidden;
|
.overflow-x-scroll
|
overflow-x: scroll;
|
.overflow-x-visible
|
overflow-x: visible;
|
.overflow-y-auto
|
overflow-y: auto;
|
.overflow-y-hidden
|
overflow-y: hidden;
|
.overflow-y-scroll
|
overflow-y: scroll;
|
.overflow-y-visible
|
overflow-y: visible;
|
Class overflow sangat mirip dengan nama propertinya, yakni diawali dengan
.overflow-
dan diakhiri dengan nama overflow-nya.
Berikut ini adalah contoh sederhana penggunaan class overflow:
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Rerum illo nulla pariatur veritatis. Asperiores placeat illo odio, velit quia quisquam saepe, modi voluptas iusto vitae veritatis provident dolorum, enim quae facilis quidem quam. Enim, saepe labore obcaecati officia delectus non veritatis vel quibusdam ex quasi rerum architecto sed asperiores, quae praesentium voluptates placeat, quam cumque cupiditate eaque. Quaerat fuga, ipsum numquam illo iste eius libero, aliquam eligendi tempora dolorum assumenda quas? Recusandae asperiores odio mollitia magnam unde, sapiente facilis commodi molestiae et ex velit hic quas earum autem assumenda ad ea dolores fuga, saepe debitis provident! Nihil laboriosam ipsum nam?
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Tempora explicabo at voluptas nisi possimus numquam distinctio, impedit saepe voluptatibus vitae perspiciatis, fuga maiores labore molestiae voluptates dolorum? Harum sunt cum quia vel explicabo minima saepe? Corrupti ipsum voluptate, omnis assumenda consequuntur sapiente, libero ad qui deleniti aliquam dolorem eveniet ab quibusdam? Consequatur placeat labore deleniti ducimus, non nam tempore ullam cum nihil iste odio animi natus similique nisi? Dolore tenetur vel iure quas pariatur eius numquam voluptatum corrupti dolor suscipit, delectus omnis dignissimos dolorum expedita! Corrupti animi adipisci deserunt repellendus doloremque, architecto labore officiis voluptas obcaecati atque laboriosam quae similique!
<div class="overflow-auto h-8 border-2 border-dashed border-teal-500 px-1">
<p>
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Rerum illo nulla pariatur veritatis. Asperiores placeat illo
odio, velit quia quisquam saepe, modi voluptas iusto vitae veritatis provident dolorum, enim quae facilis quidem quam.
Enim, saepe labore obcaecati officia delectus non veritatis vel quibusdam ex quasi rerum architecto sed asperiores, quae
praesentium voluptates placeat, quam cumque cupiditate eaque. Quaerat fuga, ipsum numquam illo iste eius libero, aliquam
eligendi tempora dolorum assumenda quas? Recusandae asperiores odio mollitia magnam unde, sapiente facilis commodi
molestiae et ex velit hic quas earum autem assumenda ad ea dolores fuga, saepe debitis provident! Nihil laboriosam ipsum
nam?
</p>
<p>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Tempora explicabo at voluptas nisi possimus numquam
distinctio, impedit saepe voluptatibus vitae perspiciatis, fuga maiores labore molestiae voluptates dolorum? Harum sunt
cum quia vel explicabo minima saepe? Corrupti ipsum voluptate, omnis assumenda consequuntur sapiente, libero ad qui
deleniti aliquam dolorem eveniet ab quibusdam? Consequatur placeat labore deleniti ducimus, non nam tempore ullam cum
nihil iste odio animi natus similique nisi? Dolore tenetur vel iure quas pariatur eius numquam voluptatum corrupti dolor
suscipit, delectus omnis dignissimos dolorum expedita! Corrupti animi adipisci deserunt repellendus doloremque,
architecto labore officiis voluptas obcaecati atque laboriosam quae similique!
</p>
</div>