TextArea do not hang preserved whitespace at the end of lines like DIV do

By design Issue #12328084


Ryan G.
Jun 13, 2017
This issue is public.
Found in
  • Microsoft Edge
Found in build #
Reported by 1 person

Sign in to watch or report this issue.

Steps to reproduce

My web application requires calculating the pixel positioning of selected text within a TextArea element. I am creating a temporary div, copying the value of the TextArea and inserting it as a text node into the div, then copying all the computed styles from the TextArea to the div and using the div to make my calculations. In all of the main browsers I have tried this with (Chrome, FireFox, Safari, IE11), the content is rendered/wrapped identically between the two elements. In Edge, however, the content is wrapped at differing positions.

Logging each of the styles, and calculated dimensions, I see that Edge reports that everything is the same between the two (even though there seems to be about a 4px difference in padding-right between them, based on where it wraps – this is not visible, but if I manually change the padding-right on the div to be 4px higher than the TextArea element, they line up). I am attaching an html file where this can be seen. Note in the first paragraph, the lorem ipsum text does not line up (the two elements are stacked on top of each other for ease of seeing this issue).

Whether this is an issue with the DIV or with the TextArea, I have no idea, but they should be rendered in the same way when all styles are equal.


1 attachment

Comments and activity

  • After further inspection and tinkering, it seems that the white-space property of the textarea does not work as expected. When changing word-wrap to “normal” (vs “break-word”), I was unable to reproduce any issues, but when reverting to word-wrap: break-word, the issue re-appeared.

  • Microsoft Edge Team

    Changed Assigned To to “Steven K.”

    Changed Assigned To to “Bogdan B.”

    Changed Assigned To from “Bogdan B.” to “Francois R.”

    Changed Status to “Confirmed”

    Changed Status from “Confirmed” to “By design”

  • The difference in your test case seems to be that with a DIV, we allow the space at the end of the line to overflow the line, while we do not allow that in a TEXTAREA.

    This behavior makes sense to me, because it means that you are always guaranteed to be able to select that space as a user.

    It is not clear to me that a TEXTAREA and a DIV should always behave the same, the expected user interaction between those is different. I’m currently resolving this issue as By Design, though I understand why you would prefer the two to behave the same in your scenario.

  • BTW, Just in case I need to look this up again, here is the spec text we do not apply for text boxes:

    If spaces or tabs at the end of a line are non-collapsible
    but have
    white-space set to
    pre-wrap the UA must either
    hang the
    white space or visually collapse the character advance widths
    of any overflowing spaces
    such that they don’t take up space in the line.
    However, if
    overflow-wrap is set to
    collapsing their advance width is not allowed,
    as this would prevent the preserved spaces from wrapping.


  • Microsoft Edge Team

    Changed Title from “TextArea or DIV not wrapping content correctly” to “TextArea do not hang preserved whitespace at the end of lines like DIV do”

You need to sign in to your Microsoft account to add a comment.

Sign in