영역을 넘어가는 연결된 문자 줄 바꿈하는 방법론

영역을 넘어가는 연결된 문자 줄 바꿈하는 방법론 : word-wrap:break-word;

단어와 단어 사이에 간격이 존재할 경우와는 달리 간격이 존재하지 않을 경우 발생하는 문제는 아래와 같다.
내용(텍스트)을 포함하는 상위 요소의 영역을 뛰쳐 나가는 현상을 보인다. 이 때문에 문서가 제대로 표현되지

않는 경우가 있을 수 있다. 특히, IE6의 경우는 내용만큼 상위 요소의 영역이 넓어지는 현상을 보인다.

CSS로 레이아웃을 잡았을 경우 IE6에서는 레이아웃이 망가지는 최악의 결과도 초래할 수 있다.

최악의 결과를 모면하기 위해서는 overflow:hidden; 속성을 사용할 수도 있으나, 이는 최선의 방법이 아니다.

그렇다면 최선의 해결책은 무엇일까? 아래 글을 계속하여 읽어보자.

Test Browser : IE6+, FF 3.5+, Chrome(webkit)

 

 

위 현상의 코드를 확인해 보자. 아래 코드를 보면 문서의 구조는 간단하다.

<div> 상위 요소 안에 내용(텍스트)을 담고 있다. 문제는 여기에서 발생한다. 바로 문자열 들이 빈 간격 없이

연결되어 이어지기 때문이다. CSS 코드를 보면 <div>의 영역을 가로, 세로 50px 만큼만 설정해 놓았기 때문에

내용이 담은 그릇을 뛰쳐나가는 현상을 보이는 것이다.

 

 

 

실상에서는 뛰쳐나가는 자식을 붙잡을 수는 없으나, 웹에서는 가능하다. 이를 해결하기 위한 방법을 알아보자.

먼저 아래 이미지를 보면 문제가 해결된 결과를 눈으로 확인할 수 있다.상위 영역을 제대로 인식하고 아래로

흘러내려가는 내용을 볼 수 있다. 영역 역시 제대로 유지된다. 특히 문제가 되었던 IE6에서도 영역이 내용만큼

넓어지는 기현상이 나타나질 않는다. 이 결과로 보면 IE6에서도 온전히 레이아웃이 보존될 것이다.

 

 

 

마지막으로 위에서 거론한 것처럼 이를 해결하기 위한 방법으로 아래 이미지를 확인해보자.

단 한 줄이면 문제는 해결된다.

 

word-wrap:break-word;   단어(word)를 싸고(wrap) 있는 것을 어떻게 처리하는가에 대한 값으로 단어(word)를 줄바꿈(break)한다.

 

종종 생기는 이런 문제를 해결하기 위해 다음의 클래스 파일을 만들어 적용하는 것도 좋을 것이다.

위 속성은 IE5+, FF3.5+, Safari, Chrome 이 지원한다. ^ㅡ^

 

.word-break {         word-wrap:break-word; }