CSS 강제 줄 바꿈 및 숨겨진 구현 이상

1. 강제 줄 바꿈

word-break: break-all; 문자를 줄 바꿈의 기초로 사용하여 영어에서만 작동합니다.

word-wrap: break-word; 단어를 줄 바꿈의 기초로 사용하여 영어에서만 작동합니다.

white-space: pre-wrap; 중국어에서만 작동하며 줄바꿈을 강제합니다.

word-break:break-all 및 word-wrap:break-word는 둘 다 div와 같은 컨테이너의 내용을 자동으로 래핑할 수 있게 해줍니다.

1. break :break-all

div 너비가 450px이라고 가정하면 해당 내용은 자동으로 450px에서 줄 바꿈됩니다. 줄 끝에 긴 영어 단어가 있으면 단어가 잘리고 그 일부가 유지됩니다. 다른 부분은 다음 줄로 이동합니다.

2. word-wrap:break-word

예제는 위와 동일하지만, 줄 끝이면 단어 전체를 처리한다는 점이 다릅니다. 전체 단어를 표시할 만큼 너비가 충분하지 않으면 단어를 자르지 않고 자동으로 전체 단어를 다음 줄에 배치합니다.

2. 줄 바꿈 및 과도한 숨기기 금지

white-space:nowrap;

overflow:hidden;은 추가 콘텐츠를 숨기는 것입니다. 그렇지 않으면 추가 콘텐츠로 인해 컨테이너가 터집니다.

text-overflow:ellipsis; 추가 내용을 줄임표로 표현합니다... 그러나 이 속성은 IE와 같은 브라우저에서 주로 사용됩니다. Opera 브라우저는 -o-text-overflow:ellipsis를 사용하지만 Firefox 브라우저에는 이 기능이 없으며 추가 내용을 숨길 수만 있습니다.