Insert line break inside placeholder attribute of a textarea?

Complementary Methods

Apart from the fast answer, let's discuss some additional techniques to handle placeholders effectively.

Breaking Lines with HTML Entities

Use the HTML entity 
, which depicts a line feed character, causing a new line in text. This can be handy in a textarea placeholder:

<textarea placeholder="First line&#10;Second line"></textarea>


This approach has satisfactory results in Chrome 62, IE10, and Firefox 60. Remember it may act stubbornly with Safari 11.

Leveraging JavaScript for Placeholder Mirroring

When HTML and CSS can't climb the mountain, JavaScript becomes our trusty sherpa. You can craft a multiline placeholder by tweaking the value of the textarea, using \n for line breaks, and switching it on focus and blur:

const textArea = document.querySelector('textarea');
const placeholderText = "First line\nSecond line";
textArea.value = placeholderText; // Who needs a placeholder when you've got VALUES 😉

textArea.addEventListener('focus', function() {
  if (this.value === placeholderText) {
    this.value = '';
  } // Play a cheeky game of peekaboo on focus...
});

textArea.addEventListener('blur', function() {
  if (this.value === '') {
    this.value = placeholderText;
  }  //...and reveal the hidden message on blur.
});


Remember to maintain the same font-size between the textarea and the placeholder text to achieve visual harmony.

Seeking Alternatives

Text isn't confined by placeholders; there are numerous ways to lay out the same instructions:

• Tooltips: Tooltip text prompts upon hovering certain elements.
• Label + Help Text: Pair a label with help text under the textarea.
• Styled Divs: A div pretends to be a textarea showcasing style-responsive text, which can go away on focus.

These tactics provide versatility and are typically more consistent across browsers.

Styling Variables to Remember

Apart from practical functionality, styling forms the backbone of a great user experience:

• Uniform Font-Size: Match the font-size between your placeholder and textarea.
• Setting Min-Height: Your textarea should cover the full placeholder text.
• Adjusting Box-Sizing: Set the textarea's box-sizing: border-box to keep borders and padding from intruding on its dimensions.

Cross-browser Testing and Limitations

Verify your solutions across diverse browsers and operating systems to ensure a universal user experience. Not every trick works everywhere, and some, like the use of pre and code tags, can have their share of limitations with placeholders.

Though the line break character entities offer an attractive solution, consider the potential consequences for readability and maintainability as your placeholder text complexity escalates.