Eu tentei algumas abordagens, mas nenhuma funcionou. Alguém sabe um truque bacana para contornar isso?

<textarea placeholder='This is a line \n this should be a new line'></textarea>

<textarea placeholder='This is a line     
should this be a new line?'></textarea> <!-- this works in chrome apparently -->

UPDATE: Não funciona no chrome. Era apenas a largura da área de texto.

Veja: http://jsfiddle.net/pdXRx/

O que você pode fazer é adicionar o texto como value, o que respeita a quebra de linha \n.

$('textarea').attr('value', 'This is a line \nthis should be a new line');

Em seguida, você pode removê-lo focuse aplicá-lo novamente (se vazio) blur. Algo assim

var placeholder = 'This is a line \nthis should be a new line';
$('textarea').attr('value', placeholder);

$('textarea').focus(function(){
    if($(this).val() === placeholder){
        $(this).attr('value', '');
    }
});

$('textarea').blur(function(){
    if($(this).val() ===''){
        $(this).attr('value', placeholder);
    }    
});

Exemplo: http://jsfiddle.net/airandfingers/pdXRx/247/

CSS não puro e não limpo, mas faz o truque.

Você pode inserir uma nova entidade html de linha 
dentro do atributo placeholder:

<textarea name="foo" placeholder="hello you&#10;Second line&#10;Third line"></textarea>

Funciona em: Chrome 62, IE10, Firefox 60

Não funciona: Safari 11

https://jsfiddle.net/lu1s/bxkjLpag/2/

Não pense que você pode fazer isso: http://www.w3.org/TR/html5/forms.html#the-placeholder-attribute

O conteúdo relevante (ênfase minha):

O atributo placeholder representa uma dica curta (uma palavra ou frase curta) destinada a auxiliar o usuário na entrada de dados quando o controle não tem valor. Uma dica pode ser um valor de amostra ou uma breve descrição do formato esperado. O atributo, se especificado, deve ter um valor que não contenha caracteres U + 000A LINE FEED (LF) ou U + 000D CARRIAGE RETURN (CR).

ATUALIZAÇÃO (jan de 2016): O belo e pequeno hack pode não funcionar mais em todos os navegadores, por isso tenho uma nova solução com um pouquinho de javascript abaixo.

Um bom pequeno corte

Não parece bom, mas você pode simplesmente colocar as novas linhas no html. Como isso:

<textarea rows="6" id="myAddress" type="text" placeholder="My Awesome House,
        1 Long St
        London
        Postcode
        UK"></textarea>

Observe que cada linha está em uma nova linha (não está sendo quebrada) e cada recuo da 'tab' tem 4 espaços. Concedido que não é um método muito bom, mas parece funcionar:

http://jsfiddle.net/01taylop/HDfju/

• É provável que o nível de recuo de cada linha varie dependendo da largura da sua área de texto.
• É importante ter resize: none;no css para que o tamanho da área de texto seja fixo (consulte jsfiddle).

Como alternativa Quando você deseja uma nova linha, pressione Enter duas vezes (para que haja uma linha vazia entre suas 'novas linhas'. Essa 'linha vazia' criada precisa ter guias / espaços suficientes que equivaleriam à largura da área de texto. Parece que não importa se você tem muitos, você só precisa o suficiente. Isso é tão sujo e provavelmente não é compatível com o navegador. Gostaria que houvesse uma maneira mais fácil!

Uma solução melhor

Confira o JSFiddle .

• Esta solução posiciona uma div atrás da área de texto.
• Algum javascript é usado para alterar a cor do plano de fundo da área de texto, ocultando ou revelando o espaço reservado apropriadamente.
• As entradas e espaços reservados devem ter os mesmos tamanhos de fonte, portanto, os dois mixins.
• As propriedades box-sizinge display: blockna área de texto são importantes ou a div por trás dela não será do mesmo tamanho.
• A configuração resize: verticale min-heighta área de texto também são importantes - observe como o texto do espaço reservado será agrupado e a expansão da área de texto manterá o plano de fundo branco. No entanto, comentar a resizepropriedade causará problemas ao expandir a área de texto horizontalmente.
• Apenas verifique se a altura mínima na área de texto é suficiente para cobrir todo o espaço reservado na menor largura. **

HTML:

<form>
  <input type='text' placeholder='First Name' />
  <input type='text' placeholder='Last Name' />
  <div class='textarea-placeholder'>
    <textarea></textarea>
    <div>
      First Line
      <br /> Second Line
      <br /> Third Line
    </div>
  </div>
</form>

SCSS:

$input-padding: 4px;

@mixin input-font() {
  font-family: 'HelveticaNeue-Light', 'Helvetica Neue Light', 'Helvetica Neue', Helvetica, Arial, 'Lucida Grande', sans-serif;
  font-size: 12px;
  font-weight: 300;
  line-height: 16px;
}

@mixin placeholder-style() {
  color: #999;
  @include input-font();
}

* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

form {
  width: 250px;
}

input,textarea {
  display: block;
  width: 100%;
  padding: $input-padding;
  border: 1px solid #ccc;
}

input {
  margin-bottom: 10px;
  background-color: #fff;

  @include input-font();
}

textarea {
  min-height: 80px;
  resize: vertical;
  background-color: transparent;
  &.data-edits {
    background-color: #fff;
  }
}

.textarea-placeholder {
  position: relative;
  > div {
    position: absolute;
    z-index: -1;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    padding: $input-padding;
    background-color: #fff;
    @include placeholder-style();
  }
}

::-webkit-input-placeholder {
  @include placeholder-style();
}
:-moz-placeholder {
  @include placeholder-style();
}
::-moz-placeholder {
  @include placeholder-style();
}
:-ms-input-placeholder {
  @include placeholder-style();
}

Javascript:

$("textarea").on('change keyup paste', function() {
  var length = $(this).val().length;
  if (length > 0) {
    $(this).addClass('data-edits');
  } else {
    $(this).removeClass('data-edits');
  }
});

Que tal uma solução CSS: http://cssdeck.com/labs/07fwgrso

::-webkit-input-placeholder::before {
  content: "FIRST\000ASECOND\000ATHIRD";
}

::-moz-placeholder::before {
  content: "FIRST\000ASECOND\000ATHIRD";
}

:-ms-input-placeholder::before {
  content: "FIRST\000ASECOND\000ATHIRD";
}

Salaamun Alekum




Funciona para o Google Chrome

<textarea placeholder="Enter Choice#1 &#10;Enter Choice#2 &#10;Enter Choice#3"></textarea>

Eu testei isso no Windows 10.0 (Build 10240) e no Google Chrome versão 47.0.2526.80 m

08:43:08 AST 6 Rabi Al-Awwal, 1437 quinta-feira, 17 de dezembro de 2015

Obrigado

Adicione apenas & # 10 para quebra de linha, sem necessidade de escrever CSS ou javascript.

textarea{
    width:300px;
    height:100px;

}

<textarea placeholder='This is a line this &#10should be a new line'></textarea>

<textarea placeholder=' This is a line 

should this be a new line?'></textarea>

Resposta antiga:

Não, você não pode fazer isso no atributo placeholder. Você não pode nem codificar html novas linhas como 
em um espaço reservado.

Nova resposta:

Navegadores modernos oferecem várias maneiras de fazer isso. Veja este JSFiddle:

http://jsfiddle.net/pdXRx/5/

Use 
no lugar \ndisso mudará a linha.

Tente o seguinte:

<textarea
placeholder="Line1&#x0a;&#x09;&#x09;&#x09;Line2"
cols="10"
rows="5"
style="resize:none">
</textarea>

http://jsfiddle.net/vr79B/

Você não pode fazê-lo com HTML puro, mas este plugin jQuery permite: https://github.com/bradjasper/jQuery-Placeholder-Newlines

Uma versão ligeiramente melhorada da resposta de Jason Gennaro (consulte os comentários do código):

var placeholder = 'This is a line \nthis should be a new line';
$('textarea').attr('value', placeholder);
$('textarea').focus(function(){
    if($(this).val() == placeholder){
        // reset the value only if it equals the initial one    
        $(this).attr('value', '');
    }
});
$('textarea').blur(function(){
    if($(this).val() == ''){
        $(this).attr('value', placeholder);
    }    
});
// remove the focus, if it is on by default
$('textarea').blur();

Gostei do trabalho de Jason Gennaro e Denis Golomazov, mas queria algo que fosse mais útil globalmente. Modifiquei o conceito para que ele possa ser adicionado a qualquer página sem repercussão.

http://jsfiddle.net/pdXRx/297/

<h1>Demo: 5 different textarea placeholder behaviors from a single JS</h1>

<h2>Modified behaviors</h2>

<!-- To get simulated placeholder with New Lines behavior,
     add the placeholdernl attribute -->

<textarea placeholdernl>    (click me to demo)
Johnny S. Fiddle
248 Fake St.
Atlanta, GA 30134</textarea>

<textarea placeholder='Address' placeholdernl>    (click me to demo)
Johnny S. Fiddle
248 Fake St.
Atlanta, GA 30134</textarea>

<h2>Standard behaviors</h2>

<textarea placeholder='Address'>    (delete me to demo)
Johnny S. Fiddle
248 Fake St.
Atlanta, GA 30134</textarea>

<textarea>    (delete me to demo)
Johnny S. Fiddle
248 Fake St.
Atlanta, GA 30134</textarea>

<textarea placeholder='Address'></textarea>

O javascript é muito simples

<script>
(function($){
var handleFocus = function(){
    var $this = $(this);
    if($this.val() === $this.attr('placeholdernl')){
        $this.attr('value', '');
        $this.css('color', '');
    }
};

var handleBlur = function(){
    var $this = $(this);
    if($this.val() == ''){
        $this.attr('value', $this.attr('placeholdernl'))
        $this.css('color', 'gray');
    }    
};

$('textarea[placeholdernl]').each(function(){
    var $this = $(this),
        value = $this.attr('value'),
        placeholder = $this.attr('placeholder');
    $this.attr('placeholdernl', value ? value : placeholder);
    $this.attr('value', '');
    $this.focus(handleFocus).blur(handleBlur).trigger('blur');
});
})(jQuery);
</script>

HTML

<textarea data-placeholder="1111\n2222"></textarea>

JS

$('textarea[data-placeholder]').each(function(){
    var $this = $(this),
        placeholder = $this.data('placeholder'),
        placeholderSplit = placeholder.split('\\n');
    placeholder = placeholderSplit.join('\n');
    $this.focus(function(){
        var $this = $(this);
        if($this.val() === placeholder){
            $this.val('');
            // $this.removeClass('placeholder');
        }
    }).blur(function(){
        var $this = $(this);
        if($this.val() == '') {
            $this.val(placeholder);
            // $this.addClass('placeholder');
        }
    }).trigger('blur');
});

A área de texto respeita o atributo de espaço em branco do espaço reservado. https://www.w3schools.com/cssref/pr_text_white-space.asp

Configurá-lo para pré-linha resolveu o problema para mim.

textarea {
  white-space: pre-line;
}

<textarea placeholder='This is a line     
should this be a new line'></textarea>

Modifiquei o violino de @Richard Bronosky dessa maneira .

É melhor abordagem usar o data-*atributo do que um atributo personalizado. Troquei <textarea placeholdernl>para <textarea data-placeholder>e alguns outros estilos também.

editado
Aqui está a resposta original de Richard, que contém um trecho de código completo.

muito simples

  var position = your break position;
    var breakLine = "
";//in html 
    var output = [value.slice(0, position), breakLine, value.slice(position)].join('');
    return output;

valor representa a sequência original

Confira esta solução com espaço reservado personalizado.

• Você obtém espaço reservado multilinha que funciona em todos os navegadores (incluindo Firefox)
• É possível personalizar o espaço reservado como você deseja

Demonstração sobre violino .

$(document).on('input', '#textArea', function () {
	
        if ($('#textArea').val()) {
            $('#placeholderDiv').hide();
        } else {
            $('#placeholderDiv').show();
        }   
});

#textAreaWrap {
    position: relative;
    background-color: white;
}

#textArea {
    position: relative;
    z-index: 1;
    width: 350px;
    height: 100px;
    min-height: 100px;
    padding: 6px 12px;
    resize: vertical;
    background-color: transparent;
    /* When set background-color: transparent - Firefox  displays
    unpleasant textarea border. Set border style to fix it.*/
    border: 1px solid #a5a5a5;
}

#placeholderDiv {
    position: absolute;
    top: 0;
    padding: 6px 13px;
    color: #a5a5a5;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="textAreaWrap">
    
<textarea id="textArea"></textarea>

<!-- Check here. If textarea has content -
     set for this div attribute style="display: none;" -->
<div id="placeholderDiv">Multiline textarea<br>
                         placeholder<br>
                         <br>
                         that works in Firefox</div>
    
</div>

Não gosto de ocultar o espaço reservado quando você focaliza a área de texto. Por isso, criei uma função construtora Placeholderque se parece exatamente com o espaço reservado interno e funciona também em outros navegadores que não o Google Chrome. É muito conveniente, porque você pode usar a Placeholderfunção quantas vezes quiser e ela nem precisa do jQuery.

EDITAR:

Agora também lida com casos especiais, como inserir o espaço reservado corretamente.

var textarea = document.getElementById("textarea");
new Placeholder(textarea, "Line 1\nLine 2\nLine 3");

function Placeholder(el, placeholder) {
    if (el.value == "" || el.value == placeholder) {
        el.style.color = "gray";
        el.value = placeholder;
        el._plc = true;
        el.className += " unselectable";
    }
    function keyPress(e) {
        window.setTimeout(function() {
            var replaced = reverseStr(el.value).replace(reverseStr(placeholder), "");
            
            if (el.value == "") {
                el.value = placeholder;
                el.style.color = "gray";
                cursorToStart(el);
                el._plc = true;
                el.className += " unselectable";
            } else if (el._plc && el.value.endsWith(placeholder) && replaced !== "") {
                el.value = reverseStr(replaced);
                el.style.color = "black";
                el._plc = false;
                el.readOnly = false;
                el.className = el.className.replace("unselectable", "");
            } else if (el._plc && el.readOnly) {
                var ch = String.fromCharCode(e.charCode);
                if (e.keyCode == 13) ch = "\n";     // ENTER
                else if (e.charCode == 0) return;   // non-character keys
                
                el.value = ch;
                el.style.color = "black";
                el._plc = false;
                el.readOnly = false;
                el.className = el.className.replace("unselectable", "");
            }
        }, 10);
    }
    el.addEventListener("keypress", keyPress, false);
    el.addEventListener("paste", keyPress, false);
    el.addEventListener("cut", keyPress, false);
    el.addEventListener("mousedown", function() {
        if (el._plc) el.readOnly = true;
    }, false);
    el.addEventListener("mouseup", function() {
        el.readOnly = false;
        if (el._plc) cursorToStart(el);
    }, false);
  
    function cursorToStart(input) {
        if (input.createTextRange) {
            var part = input.createTextRange();
            part.move("character", 0);
            part.select();
        } else if (input.setSelectionRange){
            input.setSelectionRange(0, 0);
        } input.focus();
    }
    function reverseStr(str) {
        if (!str) return "";
        return str.split("").reverse().join("");
    }
}

textarea {
    border: 1px solid gray;
    padding: 3px 6px;
    font-family: Arial;
    font-size: 13px;
    transition: .2s;
}
textarea:hover, textarea:focus {
    border-color: #2277cc;
}
textarea:focus {
    box-shadow: inset 0 0 5px #85B7E9;
}
*.unselectable {
    -webkit-user-select: none;
    -webkit-touch-callout: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -o-user-select: none;
}

<textarea id="textarea"></textarea>

Esse problema pode ser resolvido usando o seletor indicado pelo espaço reservado e os planos de fundo superimpostos, se sua implementação permitir:

textarea:not(:placeholder-shown) {
  background: #fff;
}

div {
  top: 0;
  left: 14px;
  color: rgba(0,0,0,0.4);
  z-index: -1;
  position: absolute;
  line-height: 1.2;
  white-space: pre-wrap;
}

https://codepen.io/franciscoaquino/pen/YzyBPYK

Suporte do seletor:

https://caniuse.com/#feat=css-placeholder-shown