Creative Commons License

Community

공지/뉴스
지식공유
질문/답변
자료실
자유로운 글
방명록

공유를 넘어 교류로... 제가 알리는 말씀 및 사이트 이용자들이 함게 참여하는 커뮤니케이션 공간입니다.

.

지식공유

여러분들의 개발 관련 기술이나 팁을 공유해 주세요~ 자신이 가진 작은 팁 하나가 어떤이에게는 몇 일을 삽질하게 만드는 것일 수 있습니다 ^^

Iframe 자동 줄바꿈 문제

작성자 허둥9단
작성일 2008-11-24 오후 4:45:10,    조회수 : 2222

Iframe 자동 줄바꿈 문제

 

현상

 

Iframe 으로 구현된 웹에디터에 영문과 숫자를 계속 반복해서 입력하면 아래 그림과 같이

가로로 계속 늘어나는 문제가 있습니다.(재밋는 건 한글은 자동 줄바꿈이 됩니다.)



 

 

이렇게 작성한 글을 보게 되면 아래 그림과 같이 가로로 늘어나 디자인이 깨집니다.


 


 

현재 네이버 블로그, 티스토리, 이글루스 등 테스트 해본곳 모두 이러한 문제가 발생했습니다.

티스토리 같은 경우는 111~~ 계속 입력시 overflow 스타일 속성을 hidden으로 해놓아서

그 뒤에 데이터는 보여지지 않고 네이버 블로그는 overflow:scroll; width:000px; 로 설정해서

임시방편으로 가로가 늘어나지 않도록 스크롤 처리되어 있습니다.(width 미지정시 내용만큼

가로로 늘어납니다.)

 

해결

 

우선 웹 에디터에서 숫자와 영문을 계속 입력시 자동 줄바꿈 시켜줘야 합니다.

 

아래는 Iframe 내부의 스타일 속성을 정해주는 코드입니다.

 

var html = "<html><head><style>P{white-space:-moz-pre-wrap;word-break:break-all;}</style><P>&nbsp;</P></head><body></body></html>";

editCtrl.document.open("text/html");

editCtrl.document.write(html);

 

 

white-space:-moz-pre-wrap;속성은 모질라에서 자동줄바꿈 시켜주는 스타일입니다.

앞의 -moz는 모질라 전용 스타일입니다.

IE : -pre-wrap

오페라 : -o-pre-wrap

 

아래 내용은 word-break:break-all; 속성의 설명을 발췌한 내용입니다.

 

word-break:break-all;

 

하나의 문장을 띄어쓰기할 때 쓰인 공백 기준이 아닌 문자 단위로 끊어주는 역할을 하는 스타일 속성입니다.

기본적으로 <td></td> 안에서 문장은 띄어쓰기 공백을 기준으로 잘리기 때문에 width크기를 지정해 주더라도 width 크기를 무시하고 늘어나게 됩니다.

이런 경우, 문자 단위로 끊어주면 자동으로 width에 맞춰 줄바꿈이 됩니다.

 

아래 그림에서 첫번째 그림은 word-break:break-all; 적용 전이고 두번쨰 그림이 적용된 그림입니다

이와 같이 모든 행이 자동 줄바꿈이 되는 것을 알 수 있습니다.

 

AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA

 

AAAAAAAAAAAA

AAAAAAAAAAAA

AAAAAAAAAAAA

AAAAAAAAAAAA

AAAAAAAAA

 

이렇게 스타일을 작성하여 적용된 에디터의 그림은 아래와 같습니다.

 

 

에디터에서 자동 줄바꿈에 대한 처리를 해줬지만 포스트 보기에선 처리를 해주지 않았기 때문에

스타일을 적용해 줘야 합니다.

 

<div class="scrap_boxm">

        /*등록한 콘텐츠*/

</div>

 

.scrap_boxm p {padding:10px 0 9px; white-space:-moz-pre-wrap; white-space:pre-wrap; white-space:-o-pre-wrap; word-break:break-all;}

 

모질라와 IE에서 쓰는 스타일 속성이 다르기 때문에 반드시 모든 브라우저에서 적용되도록 코딩해야 합니다.

이로써 등록한 포스트는 아래 그림과 같이 문제 없이 잘 작동됩니다.

 

 

이름
비밀번호
홈페이지
AM <- 왼쪽의 문자를 오른쪽 박스에 똑같이 입력해 주세요