HTML 여러 개의 연속적인 공백 또는 줄바꿈 표시

이현섭·2023년 5월 17일
0

HTML에서 여러 개의 연속적인 공백 또는 줄바꿈을 표시하기 위해서는 CSS에서 'white-space' 속성을 사용해야 함.

이 속성을 pre 또는 pre-wrap 값으로 설정하면 공백과 줄바꿈을 그대로 표시할 수 있음.

HTML

<div id="myDiv"></div>

JavaScript

const div = document.getElementById('myDiv');
const content = "ㄹㄹㄹㄹㄹ\n\n\n\n\nㅋㅋㅋㅋ\n\n\n띄               워             쓰           기";

div.innerText = content;
div.style.whiteSpace = "pre";
  • white-space: pre : 공백과 줄바꿈을 그대로 표시.

  • white-space : pre-wrap : 공백과 줄바꿈을 유지하면서 필요에 따라 줄을 자동으로 끊음.

profile
안녕하세요. 프론트엔드 개발자 이현섭입니다.

0개의 댓글