Online Html Editor

<!DOCTYPE html> <html lang="en"> <head> <style> body { font-family: Arial, sans-serif; padding: 20px; } .container { width: 300px; border: 2px solid #333; padding: 10px; background-color: #f0f0f0; } .no-wrap { overflow-wrap: normal; /* Long words will overflow */ background-color: #ffcccb; } .wrap { overflow-wrap: break-word; /* Long words will wrap to the next line */ background-color: #d0f0c0; } </style> </head> <body> <h1>Overflow-Wrap Example</h1> <h2>Without overflow-wrap</h2> <div class="container no-wrap"> ThisIsAVeryLongWordThatDoesNotContainAnySpacesOrHyphensAndItWillOverflowTheContainerIfNoWrappingIsApplied. </div> <h2>With overflow-wrap: break-word</h2> <div class="container wrap"> ThisIsAVeryLongWordThatDoesNotContainAnySpacesOrHyphensAndItWillWrapToTheNextLineIfOverflow-WrapIsSetToBreak-Word. </div> </body> </html>