티스토리 뷰

줄바꿈 처리하기

글을 작성하는 경우 텍스트의 일부가 영역을 넘어가게되면 이를 해결하기 위해 줄바꿈이 필요합니다. 아래는 이와 관련된 속성을 알아보고 예제를 통해 배워보도록 하겠습니다. 


! word-wrap 속성
word-wrap 속성은 텍스트가 해당 영역을 넘어갈 경우 강제로 줄바꿈을 할 것인지 아니면 그대로 이어서 보이게 할 것인지를 결정하는 css 속성입니다. 우선 간단한 사용방법은 아래와 같습니다. 

#test { word-wrap: 옵션값; }


word-wrap 속성은 선택가능한 옵션값으로 다음과 같이 normal 그리고 break-word가 존재합니다.

i. normal // 기본값으로 허용된 랩핑만 허락함
ii. break-word // 허용되지 않더라도 줄바꿈이 가능하도록 변경함

word-wrap 속성을 사용할 경우 아래 예제처럼 글이 해당 영역을 넘어가는 경우 랩핑 방법을 결정할 수 있습니다. 그럼 아래 예제 및 소스를 참고하세요.


# word-wrap normal인 경우

<p>abcdefghijklmnopqrstuvwxyz</p>

<style type="text/css">
p {
width: 50px;
  height: 22px;
  display: inline-block;
  border: 1px solid #111;
  word-wrap: normal;
}
</style>


abcdefghijklmnopqrstuvwxyz




# word-wrap 속성이 break-word 인 경우

<style type="text/css">
  p {
    width: 50px;
    height: 22px;
    display: inline-block;
    border: 1px solid #111;
    word-wrap: break-word;
  }
</style>
<p>abcdefghijklmnopqrstuvwxyz</p>


abcdefghijklmnopqrstuvwxyz






! word-break 속성


#test { word-break: option; }
word-break 속성 역시 줄바꿈과 관련괸 속성으로 단어끼리 붙어있는 경우 줄바꿈이 지동으로 되게 할 것인지를 결정할 수 있습니다. 이 속성에 사용가능한 옵션값은 keep-all 그리고 break-all입니다. 

참고로 이 속성은 아시아를 위해 만들어진 속성(영문 텍스트의 경우 자동으로 하나의 연결된 단어는 함께 묶어서 줄바꿈이 이루어집니다. 하지만 한글 이외의 2byte 이상의 문자들은 그렇지 않죠.)으로 영문과 달리 byte단위로 구분되지 않는 언어의 랩핑을 돕습니다. 즉 영문이 아닌 단어의 줄바꿈을 원할 경우 사용하면 좋습니다. 예를들어...

우리는 하나입니다. 이 문장에서 아래와 같이 줄바꿈이 생길 수 있습니다.

우리는 하나입니      <---   이처럼 줄바꿈이 생긴경우...
다.

word-break 사용하면 아래와 같이 바뀝니다. 문장 전체에 적용 역시 가능합니다.

Result)

우리는
하나입니다.

즉, 영문과 달리 의미있는 단어들이 랩핑되는 현상을 막을 수 있게됩니다. 아래는 이를 사용한 예제입니다.


! word-break 코드 예제보기

<style type="text/css">
.p { word-break: keep-all; }
</style>

<p class="test">우리는 하나입니다.</p>


매우 유용한 속성임에도 표준코드가 아니며 현재로서는 모질라 계열(mozilla, 파이어폭스)과 IE(익스플로러)에서만 사용가능합니다.


Recent Comments