CSS - 넘치는 단어 줄바꿈 하는 요소

한글은 브라우저 창의 크기에 따라 자동으로 줄바꿈을 하지만 영어의 경우는 그렇지 않습니다. 긴 단어가 영역에 모두 들어가지 않을 때는 word-wrap 속성을 이용해 단어 중간에 줄바꿈할 것인가를 지정할 수 있습니다.

	설 명
normal	줄바꿈 가능한 곳이 있으면 줄바꿈하고 그 외에는 줄바꿈하지 않음. 공백을 기준으로 줄바꿈을 함.
break-word	줄바꿈할 곳이 없으면 필요에 따라 단어 중간에 줄바꿈함.

<style>
#user-wrap {
  width: 150px;
  height: 100px;
  border: 1px solid;
  margin: 10px;
}
.use-break1 {
  word-wrap: normal;
}
.use-break2 {
  word-wrap: break-word;
}
</style>
<div id="user-wrap" class="use-break1">
  aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
</div>

<div id="user-wrap" class="use-break2">
  aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
</div>

aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa

aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa