Notice
Recent Posts
Recent Comments
Link
- Arawn's Dev Blog
- Outsider's Dev Story
- Toby's Epril
- Benelog
- NHN 개발자 블로그
- SK 플래닛 기술 블로그
- OLC CENTER
- 소프트웨어 경영/공학 블로그
- 모바일 컨버전스
- KOSR - Korea Operating System …
- 넥스트리 블로그
- 리버스코어 ReverseCore
- SLiPP
- 개발자를 위하여... (Nextree 임병인 수석)
- "트위터 부트스트랩: 디자이너도 놀라워할 매끈하고 직관…
- Learning English - The English…
- real-english.com
- 'DataScience/Deep Learning' 카테…
- Deep Learning Summer School, M…
- Deep Learning Courses
민서네집
웹페이지에서 줄바꿈, 꺽쇠, & 문자 표시 본문
/** * @작성일 : 2015. 3. 19. * @작성자 : Heeseok * @Method 설명 : 특수문자 치환 - HTML 형식으로 데이터 표시 시 호출 * @param sContent * @returns */ function gfReplaceSecure(sContent){ sContent = sContent.replace(/&/gi,'&').replace(/</gi,'<').replace(/>/gi,'>').replace(/\"/gi,'"').replace(/'/gi,'"').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
'WEB (HTML, CSS)' 카테고리의 다른 글
jQuery Tables Plugin & Tutorials with Example (0) | 2015.05.01 |
---|---|
웹 SpreadSheet 오픈소스 라이브러리 (0) | 2015.04.22 |
홈페이지 대놓고 베끼기, lightBox 사용해보기 (0) | 2015.02.13 |
Google 폴리머 (0) | 2015.01.30 |
Mouse Hover 시 이미지 교체하면서 Transition 효과 주기 (0) | 2015.01.13 |
Comments