업데이트 (2016 년 1 월) : 멋진 작은 핵이 더 이상 모든 브라우저에서 작동하지 않을 수 있으므로 아래에 작은 자바 스크립트가있는 새로운 솔루션이 있습니다.

좋은 작은 해킹

기분이 좋지는 않지만 HTML에 새 줄을 넣을 수 있습니다. 이처럼 :

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

각 줄은 줄 바꿈이 아닌 새 줄에 있으며 각 ‘탭’들여 쓰기는 4 칸입니다. 그것은 좋은 방법은 아니지만 작동하는 것 같습니다.

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

• 각 줄의 들여 쓰기 수준은 텍스트 영역의 너비에 따라 달라질 수 있습니다.
• 하는 것이 중요합니다 resize: none;텍스트 영역의 크기가 (참조 jsfiddle)에 고정되도록 CSS에서.

또는
새 줄을 원할 때 return 키를 두 번 누르십시오 (따라서 ‘새 줄’사이에 빈 줄이 있습니다. 만들어진 ‘빈 줄’에는 텍스트 영역의 너비와 같은 충분한 탭 / 공간이 있어야합니다. 너무 많은 경우 문제가되지 않는 것만으로 충분합니다. 이것은 너무 더럽고 브라우저와 호환되지 않을 수 있습니다. 더 쉬운 방법이 있었으면 좋겠습니다!

더 나은 솔루션

JSFiddle을 확인하십시오 .

• 이 솔루션은 텍스트 영역 뒤에 div를 배치합니다.
• 일부 자바 스크립트는 텍스트 영역의 배경색을 변경하여 자리 표시자를 적절하게 숨기거나 표시하는 데 사용됩니다.
• 입력과 자리 표시자는 동일한 글꼴 크기를 가져야하므로 두 믹스 인입니다.
• 텍스트 영역 의 box-sizing및 display: block속성이 중요하거나 뒤에있는 div의 크기가 동일하지 않습니다.
• 텍스트 영역의 설정 resize: vertical및 a min-height도 중요합니다. 자리 표시 자 텍스트가 어떻게 줄 바꿈되는지 확인하고 텍스트 영역을 확장하면 흰색 배경이 유지됩니다. 그러나 resize속성을 주석 처리 하면 텍스트 영역을 가로로 확장 할 때 문제가 발생합니다.
• 텍스트 영역의 최소 높이가 전체 자리 표시자를 가장 작은 너비로 덮을 수있을만큼 충분한 지 확인하십시오. **

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

자바 스크립트 :

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

답변

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

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

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




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

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>