Properties
Tips
CSS Tutorial

Textarea Overflow

Preserve the pre format of a Textarea Overflow

Textarea overflow

Info

If the textarea needs to be with no wrapping of text and preserve the whitespace entered by the user, it needs the following properties

  • Preserves whitespace and prevents automatic wrapping
  • Adds a horizontal scrollbar on overflow
  • Ensures parent settings don't force a wrap

Sample Code

style.css
Copy
textarea {
    white-space: pre; /* Preserves whitespace and prevents automatic wrapping */
    overflow-x: scroll; /* Adds a horizontal scrollbar on overflow */
    overflow-wrap: normal; /* Ensures parent settings don't force a wrap */
    
    border: none;
    outline: none;
    
    box-sizing: border-box;
}

Sample Output