Back
Syntax
Study
Editor
Mode:
HTML
CSS
JavaScript
PHP
Reset
Run »
HTML / CSS / JS
<!DOCTYPE html> <html> <head> <style> body { font-family: Arial; padding: 20px; } .box { width: 300px; height: 100px; overflow: auto; background: #ede9fe; padding: 16px; margin: 12px 0; border-radius: 8px; } .hidden { width: 300px; height: 80px; overflow: hidden; background: #d1fae5; padding: 16px; margin: 12px 0; border-radius: 8px; } .truncate { width: 200px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; background: #fef3c7; padding: 8px; } </style> </head> <body> <div class="box"> <p>overflow: auto — scroll when content is too tall. Line 1. Line 2. Line 3. Line 4. Line 5. Line 6. Line 7.</p> </div> <div class="hidden"> overflow: hidden — content clipped. Line 1. Line 2. Line 3. Line 4. Line 5. </div> <div class="truncate">This long text gets truncated with an ellipsis...</div> </body> </html>
Result
Open