Online Html Editor

<!DOCTYPE html> <html lang="en"> <head> <style> body { padding: 10px; font-family: Arial, sans-serif; } .content { width: 200px; /* Fixed width to enable horizontal scrolling */ overflow-x: auto; /* Allow horizontal scrolling */ border: 2px solid #ccc; padding: 10px; white-space: nowrap; /* Prevent wrapping of content */ } /* Default styles */ .content p { display: inline-block; margin-right: 10px; } /* Styles when overflow-inline is none */ @media (overflow-inline: none) { .content { background-color: lightgreen; border-color: darkgreen; } } /* Styles when overflow-inline is scroll */ @media (overflow-inline: scroll) { .content { background-color: lightcoral; border-color: darkred; } } /* Styles when overflow-inline is auto */ @media (overflow-inline: auto) { .content { background-color: lightyellow; border-color: darkgoldenrod; } } /* Styles when overflow-inline is hidden */ @media (overflow-inline: hidden) { .content { background-color: lightblue; border-color: darkblue; } } </style> </head> <body> <h2>Overflow-Inline Media Feature Example</h2> <div class="content"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p> <p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> </div> </body> </html>