민서네집

웹페이지에서 줄바꿈, 꺽쇠, & 문자 표시 본문

WEB (HTML, CSS)

웹페이지에서 줄바꿈, 꺽쇠, & 문자 표시

브라이언7 2015. 3. 19. 17:26
 /**
  * @작성일   : 2015. 3. 19. 
  * @작성자   : Heeseok
  * @Method 설명 : 특수문자 치환 - HTML 형식으로 데이터 표시 시 호출
  * @param sContent
  * @returns
  */
 function gfReplaceSecure(sContent){
 	sContent = sContent.replace(/&/gi,'&amp;').replace(/</gi,'&lt;').replace(/>/gi,'&gt;').replace(/\"/gi,'&quot;').replace(/'/gi,'&quot;').replace(/\n/gi,'<br/>'); 
 	return sContent;
 }


웹페이지에서 서버에서 넘어온 텍스트의 줄바꿈, 꺽쇠, & 문자 등을 제대로 표시하려면 위의 Javascript Function을 이용하면 된다.


그런데 Table 안의 td 태그에서는 위의 자바스크립트 Function으로 변환하지 않더라도 css 설정 만으로 줄바꿈을 표시할 수 있다. - 꺽쇠나 따옴표 문자(인용 문자, Quote 기호)는 따로 변환하지 않아도 그대로 보인다.


이 때, Table 안의 td 태그에 주는 css 설정은,


style="white-space: pre-wrap;"


이렇게 설정해 주면, 마치 <pre> 태그를 쓴 것처럼 줄바꿈이 되서 표시된다. 그리고 wrap 의 기능까지 더해진다.


[출처] 

[CSS] 텍스트 줄바꿈 처리 word-break, white-space


http://htglss.tistory.com/31


Comments