웹 문서에서 텍스트는 별도의 개행 처리를 하지 않는 한 지정된 공간 내에서 오른쪽 끝까지 차지한다. 그리고 남은 이후 텍스트는 자동으로 개행된다. 공간과 관계없이 강제로 개행된 텍스트를 동적으로 설정하는 방법을 알아보자.
텍스트를 동적으로 설정하거나 추가하는 방법은 innerText
나 textContent
속성을 사용하면 된다. 이 둘의 속성은 해당 요소의 텍스트 콘텐츠를 변경할 수 있지만 HTML로 구성된 콘텐츠는 적용할 수 없다. 따라서 경우에 따라서는 인위적으로 개행된 텍스트를 적용하고 하는 경우에는 개행 태그인 <br>
를 사용할 수 없으므로 기본적으로 innerText
나 textContent
속성으로 가능하지 않다.
그렇다면 innerHTML 속성을 사용하지 않으면 간단하게 해결되지 않을까? 물론 <br>
태그를 사용할 수 있으므로 간단히 해결된다. 그러나 innerHTML
속성은 보안상의 이유로 권장되지 않는다. 태그만 포함된 문자열만으로 마크업 구조를 변경할 수 있다는 것은 바람직하지 않아 보인다. DOM을 변경할 때는 추가할 요소를 생성하고 콘텐츠를 지정해서 기존 DOM에 넣는 방식이 프로그래밍스럽고 안전하다. 과연 textContent
속성 만으로 임의로 개행된 텍스트를 지정할 수 있을까? 다음 두가지 방식을 제안하고 싶다.