DOCUMENTS

  • account_tree
  • bug_report

개행된 텍스트 콘텐츠를 동적으로 설정

웹 문서에서 텍스트는 별도의 개행 처리를 하지 않는 한 지정된 공간 내에서 오른쪽 끝까지 차지한다. 그리고 남은 이후 텍스트는 자동으로 개행된다. 공간과 관계없이 강제로 개행된 텍스트를 동적으로 설정하는 방법을 알아보자.

텍스트를 동적으로  설정하거나 추가하는 방법은 innerTexttextContent 속성을 사용하면 된다. 이 둘의 속성은 해당 요소의 텍스트 콘텐츠를 변경할 수 있지만 HTML로 구성된 콘텐츠는 적용할 수 없다. 따라서 경우에 따라서는 인위적으로 개행된 텍스트를 적용하고 하는 경우에는 개행 태그인 <br>를 사용할 수 없으므로 기본적으로 innerTexttextContent 속성으로 가능하지 않다.

그렇다면 innerHTML 속성을 사용하지 않으면 간단하게 해결되지 않을까? 물론 <br> 태그를  사용할 수 있으므로 간단히 해결된다. 그러나 innerHTML 속성은 보안상의 이유로 권장되지 않는다. 태그만 포함된 문자열만으로 마크업 구조를 변경할 수 있다는 것은 바람직하지 않아 보인다. DOM을 변경할 때는 추가할 요소를 생성하고 콘텐츠를 지정해서 기존 DOM에 넣는 방식이 프로그래밍스럽고 안전하다. 과연 textContent 속성 만으로 임의로 개행된 텍스트를 지정할 수 있을까? 다음 두가지 방식을 제안하고 싶다.

CSS의 도움을 받는 방법

로직으로 처리하는 방법