你可以插入一个新的行html实体
在占位符属性内部:

< textarea name = " foo " placeholder =“你好you& 10;第二个line& #第三线" > < / textarea > 10;

适用于: Chrome 62, IE10, Firefox 60

不起作用: Safari 11

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

使用自定义占位符检查此解决方案。

您将获得在所有浏览器(包括Firefox)中都可用的多行占位符 这是可以自定义占位符，因为你想要

演示小提琴。

$(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>

如何使用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";
}

您可以做的是将文本作为值添加，它尊重换行符\n。

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

然后你可以在焦点上删除它，然后在模糊上应用它(如果为空)。就像这样

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);
    }    
});

例如:http://jsfiddle.net/airandfingers/pdXRx/247/

不是纯粹的CSS，不干净，但做到了。

只添加&#10用于断行，不需要编写任何CSS或javascript。

textarea { 宽度:300 px; 身高:100 px; ｝ <textarea占位符='这是一行这&#10应该是一个新行'></textarea> <textarea placeholder='这是一行 这应该是一条新线吗?" > < / >文本区域

但需要注意的是，问题的前提与W3规范不一致，因此不能保证行为，解决方案使用&x10;工作时<textarea>是要在HTML中定义:

<textarea 
  placeholder="HTML entity works &#10; but unicode entity hard-coded \u000A !">
</textarea>

但是如果<textarea>是用JavaScript创建的，那么&#10;实体将在输出中硬编码。然而，使用unicode等效的\u000A是可以的:

let myArea = document.createElement("textarea");
myArea.placeholder = "Unicode works \u000A But HTML entity hard-coded 
 !";