CSS 줄바꾸기 자동 줄바꿈 코드 - div 밖으로 나간 글자와 white-space, word-wrap, work-break, flex-wrap:wrap > 웹제작/운영

CSS 줄바꾸기 

div 밖으로 나간 글자 자동 줄바꿈 코드

white-space, word-wrap, work-break, flex-wrap:wrap

 

홈페이지를 만들다 보면, 가로 사이즈를 고정해도 div 밖으로 글자가 나가는 경우가 있다.

이럴 때 사용하는 것이 white-space, word-wrap, work-break 등이다.

그런데 li 같은 요소일 경우, flex-wrap:wrap가 더 편리하기 때문에, CSS 자동 줄 바꿈 코드 설명에 포함해서 함께 알아본다.

CSS 줄바꾸기 자동 줄바꿈 코드 - div 밖으로 나간 글자와 white-space, word-wrap, work-break, flex-wrap:wrap

글자가 div 밖으로 나가는 이유와 white-space

사이트를 읽어 들인 브라우저는 기본적으로 white-space 속성값대로 글자를 표현하다.

그리고 일반적으로 이 white-space 줄 바꿈은 자동으로 줄 바꾸기로 설정되어 있다.

하지만 두 가지 문제점이 발생한다.

• 첫 번째는 붙어 있는 단어 자체가 너무 길어서 어디서 끊어야 할지 모르는 경우이고,
• 두 번째는 이미 위쪽에서 연속으로 글을 붙여서 보여 주도록 했었기 때문일 수도 있다. 

이 중, 첫 번째의 문제는 word-wrap, work-break, flex-wrap:wrap 등을 통해서 해결하면 되고,

두 번째의 경우는 white-space의 줄 바꿈 속성을 normal로 바꿔서 아래처럼 해결할 수 있다.

[code]

<style type="text/css">

   p { white-space:normal; }

</style>

[/code]

그런데 만약, 자동 줄 바꿈이 일어나서는 안 될 때는 어떻게 해야 할까? 그럴 때는 아래처럼 자동으로 줄이 바뀌지 않도록 white-space 속성을 nowrap으로 바꾸면 된다.

[code]

<style type="text/css">

   p { white-space:nowrap; }

</style>

[/code]

CSS 자동 줄바꿈 코드 word-wrap와 work-break

이번에는 단순하게 자동 줄 바꾸기만 다룰 것이 아니라, 단어별로, 또는 글자별로 세밀하게 조정하는 방법도 알아보자. 그것이 바로 word-wrap와 work-break다. 

div 밖으로 글자가 나갈 때는 아래처럼 div의 클래스에 속성을 줘 보자.

[code]

<style type="text/css">

   .div클래스 { word-wrap:break-word; }

</style>

[/code]

이것은 무조건 가로 너비를 넘지 못하도록 하는 CSS 줄 바꾸기 코드다. 

하지만 문제가 있다. 영어의 경우, smiles 같은 단어가 오른쪽 끝에 왔을 때 div 너비를 넘어가면 "smi"와 "les"로 잘라서 다음 줄로 가버린다. 자칫하면 무슨 단어인지 모르는 문제가 발생한다.

그래서 해결할 수 있는 것이 work-break라는 것이다. 

[code]

<style type="text/css">

   .div클래스 { work-break:keep-all; }

</style>

[/code]

이렇게 하면 단어별로만 분리하고 문자별로는 분리되지 않는다. 

하지만 work-break 줄 바꾸기를 그냥 word-wrap처럼 간편하게 쓰고 싶다면? 그럴 때는 아래처럼 하면 된다.

[code]

   .div클래스 { work-break:break-all; }

[/code]

요소의 자동 줄바꿈 코드 flex-wrap:wrap

그런데 또 궁금증이 발생한다. 글자가 아니라 li 같은 썼을 때는 어떻게 하냐는 것이다. 

물론 li는 기본적으로 자동 줄 바꿈이다. 하지만 li에 "float:left"를 했을 때는 마치 문장처럼 옆으로 나열되기 때문에 이런 문제가 생긴다. 

li나 div 같은 요소를 포함한 자동 줄 바꾸기 코드는 display:flex;를 쓰는 것이 효과적이다.

단, 줄 바꿈을 원하는 li에 사용하지 말고, li를 감싸고 있는 ul에 사용해야 한다는 것에 주의하자.

div나 span의 경우에도 그 요소에 사용하는 것이 아니라, 요소를 감싸고 있는 상위 div에 사용해야 한다. 

왜냐면 display:flex;라는 것 자체가 감싼 것의 내부를 정렬하는 것이기 때문이다. 

 

[code]

<style type="text/css">

   .div 상위클래스 { display:flex; flex-wrap:wrap; }

</style>

[/code]

그런데 만약, 자동으로 줄바꿈 되고 있는 상태에서 잠시 이를 중지하고 싶을 때는 어떻게 할 것인가? [저작권법 표시] 원본 출처 : 키스세븐(www.kiss7.kr)

그럴 때는 flex-wrap의 속성인 wrap 부분을 nowrap로 바꾸면 간단히 해결된다.

만약 display:flex; 사용방법에 대해 궁금하거나 더 자세한 정보가 필요하다면 아래의 링크를 이용해 본다.

 

display:flex - 레이아웃 배치 CSS 플렉스 옵션