예제와 같은 상황에서, 감싸고 있는 영역이 가로값이 없기때문에,

브라우저는 자동으로 안의 컨텐츠의 크기만큼 늘어나려고 하는데

영어로 입력했을때는 알파벳 나열 즉, 예제와 같은 띄어쓰기 없는 assdfsdfsdf 이러한 영어 조합은

한단어로 인식하여 자동으로 그 만큼 커지는 것입니다.

한글의 경우 ㅇㅇㅇㅇ와 같은 나열일 경우 ㅇ 하나 하나마다 단어로 취급하기때문에 자동으로

띄어써지는것입니다.


위의 예제에서 한글을 보면, 감싸는 영역이 부모 즉, 1뎁스의 크기와 동일한것을 확인하실 수 있을텐데요,

그것은 자동으로 부모의 영역을 따라가서 한글을 그만큼의 영역만을 가지고 그것이 넘어갈때 자동으로 줄바꿈이 일어나는것이구요,

영문의 경우 위드가 정확히 픽스 되어 있지 않은데다 한단어로 인식을 하게되어 부모의 영역보다 넓어지는 것을 확인하실 수 있을겁니다.

이때 2뎁스의 UL 이나 LI의 가로값을 정확히 픽스 해보면 차이를 알 수 있으실 겁니다.

가로값을 픽스 하게 되면 한글은 여전히 픽스된 가로값 이상을 벗어나는 부분은 모두 한단어로 이루어져 있기 때문에 정확히 줄바꿈이 일어나지만,

영문의 경우 가로값이 픽스 되어 영역이 잡혀있지만 영문메뉴는 한단어로 인식하기때문에

픽스되어 있는 영역을 뚫고 나오게 됩니다.

이는 정확히 픽스되어 있는 부모에 (예를들면 가로 300 세로 200 의 DIV)
부모보다 더 큰 가로 세로 값을 가진 이미지를 넣으면 그 부모 영역을 뚫고 이미지가 표시되는 것과 같은
이치입니다.

만약 이미지의 부모가 가로세로값이 픽스 되어 있지 않다면 부모 영역은 자식 이미지의 크기에 맞게 늘어나겠지요.

여기서 중요한 포인트는 영문의 경우 ASDFSDFSDF 이러한 나열을 한단어로 보기 때문에, 영역을 뚫고 나온다는 것입니다.

하지만 거의 긴 영단어를 제외하고는 그런식으로 영단어를 사용하지 않기때문에 큰 이슈는 아닙니다.


위와 같은 상황에서 긴 영단어를 사용하고자 하는 경우

해당 엘리먼트에 word-break:break-all; 을 하여 넓이를 벗어나는 문자에 대해 문자단위로 줄바꿈을 해주는 설정을 해주시거나
(이때도 width: 값은 픽스)

해당 넓이 만큼을 벗어났을시 ··· 과 같은 표시를 하여 영역을 가려주는

{width:몇;overflow:hidden;text-overflow:elipsis;white-space:nowrap;} 를 해주시면 됩니다.