Html – Disabled textarea loses line breaks

The wrap value is not valid for the white-space CSS property, and the accepted values can be one of the following:

white-space: normal|nowrap|pre|pre-line|pre-wrap|initial|inherit;

To fix this, you can use white-space: pre-wrap;.

textarea:disabled {
  ...
  white-space: pre-wrap;
}

This will ensure that the content of the textarea is wrapped at the end of lines and that white spaces and line breaks are preserved, even when the textarea is disabled.

The final version should be like this:

const textarea = document.querySelector("textarea");

document.querySelector("button").addEventListener("click", (e) => {
  if (!textarea.hasAttribute("disabled")) {
    textarea.setAttribute("disabled", "disabled");
  } else {
    textarea.removeAttribute("disabled", "disabled");
  }
});

textarea,
textarea:disabled {
  width: 600px;
  height: 100px;
  white-space: pre-wrap;
}

<textarea wrap="on">1asdfasdf

2afdasdfafdasdfafdasdfaw


3asdfasdf


4asdfasdf</textarea>

<br/>

<button>Toggle 'disabled'</button>

pre vs pre-wrap vs pre-line

1. white-space: pre;

   • Whitespace Preservation: All sequences of white space (like spaces and tabs) are preserved precisely as written in the HTML.
   • Line Breaks: Lines break only at newline characters (n) in the HTML source or at <br> elements. It does not automatically wrap text to the next line when it exceeds the container’s width.
   • Use Case: Often used for displaying code or preformatted text where the formatting is crucial and should be shown exactly as it’s written in the HTML.

2. white-space: pre-wrap;

   • Whitespace Preservation: Similar to pre, it preserves all sequences of white space.
   • Line Breaks: Lines break at newline characters, at <br> elements, and automatically break/wrap when they reach the end of the container (line boxes).
   • Use Case: Useful when you want to maintain the original white space and line breaks but also need the text to wrap within its container, like in certain text editors or comment sections.

3. white-space: pre-line;

   • Whitespace Collapse: Unlike pre and pre-wrap, pre-line collapses sequences of white space into a single white space. However, it still preserves line breaks in the content.
   • Line Breaks: Lines break at newline characters, at <br> elements, and text wraps at the edge of the container.
   • Use Case: This is useful when you want to keep the text formatting clean and uncluttered while respecting the explicit line breaks, like in certain types of formatted content display.