CSS textarea 줄바꿈 HTML 인식하기

텍스트 영역에서 줄바꿈( )이나 공백을 그대로 표시하려면 white-space 속성을 사용합니다.

기본 해결책

white-space: pre-line;

white-space 속성 값

값줄바꿈공백자동 줄바꿈
normal무시병합O
nowrap무시병합X
pre유지유지X
pre-wrap유지유지O
pre-line유지병합O

사용 예시

/* 줄바꿈만 유지, 공백은 병합 */
.content {
    white-space: pre-line;
}

/* 줄바꿈과 공백 모두 유지 */
.code-block {
    white-space: pre-wrap;
    word-break: break-all;
}

/* 텍스트가 넘칠 때 처리 */
.text-area {
    white-space: pre-line;
    overflow-wrap: break-word;
}

JavaScript에서 줄바꿈 처리

// 
을 br 태그로 변환
var text = data.replace(/
/g, "
");

// 또는 CSS로 처리
element.style.whiteSpace = "pre-line";

textarea에서 가져온 값 표시

<!-- HTML -->
<div class="display-area"></div>

<style>
.display-area {
    white-space: pre-line;
    word-wrap: break-word;
}
</style>

<script>
// textarea 값을 div에 표시
$("#displayBtn").click(function() {
    $(".display-area").text($("#myTextarea").val());
});
</script>