공홈에서도 가끔 보여지는 긴 영문단어, 흔히 경로 같은 경우에 볼 수 있죠.

줄 처음에서 시작하여 DIV영역의 오른 쪽 끝을 뚫고 나가버리거나 

overflow:hidden에 의해 가리워져버려 해당 문자들이 보여지지 않는 경우를 얘기하는겁니다. 

이러한 문제는 코드하이라이터에서도 마찬가지인데 참 보기도 좋지않으며 답답하기까지 합니다.

CJK로 분류되는 한글 같은 경우는 영어문자와 달라서 word-wrap의 default(normal)인 상태에서도

문장이 div의 끝에 다다르면 자동 줄바꿈(break)되어 보여지게됩니다.

그러나 영문에서는, 연속되는 문자들은 하나의 단어로 인식하므로 

줄바꿈을 강제로 시켜주지 않으면 절대 굽힘이 없습니다. OTL 그래서 뚫고 나가게되는 것이죠.

 XE에서는 에디터로 작성한 글이 그대로 xe_content 라는 CSS 클래스에 담겨지게 되는데

다음과 같은 CSS Property를 해당 클래스에 추가해주면 긴 영문단어가 DIV를 뚫고나가지 않게됩니다.

word-wrap:break-word; (모든 브라우저에서 작동함.)

게시판의 경우 사용하는 보드스킨(XE_Official v.1.3.1 기준) 폴더 안의 css 폴더 안에 있는 

board.css 파일 line 189 에 윗 코드를 추가해주면 됩니다. 

.boardReadBody .xe_content{ overflow:hidden; word-wrap:break-word; }

에디터의 글쓰기 편집창에서는 뚫고나가지는 않지만 

편집창 아래에 스크롤바를 만들어내며 밀고나가는데, 엮시 윗 코드를 사용할 수 있습니다.

사용하는 문서서식이 기본서식일 경우 modules/editor/styles/default/editor.css 파일의 line 5에

윗 코드를 추가합니다.

.xe_content{color:#000;font-size:12px;line-height:1.5; word-wrap:break-word;}

보드스킨이 다르거나 문서서식이 다를경우도 폴더만 틀릴뿐  내용은 크게 다르지 않을 것 같습니다.

XE 코드에서 white-space는 보았어도 윗 word-wrap는 사용을 안하는 것 같더군요.

왜인지는 저도 모르겠지만, 필요한 분들은 적용해보세요. 

혹시 이 CSS코드가 XE에서의 사용에 문제가 있다면 알려주시기 바랍니다.

문제가 없다면 Core와 공홈에도 적용되었으면 좋겠군요.