CSS에서 단어 줄 바꿈과 단어 나누기의 차이점은 무엇입니까?

이 장에서는 CSS에서 CSS에서 단어 줄 바꿈과 단어 나누기의 차이점은 무엇입니까?과 CSS에서 단어 줄 바꿈과 단어 나누기의 차이점은 무엇입니까?의 차이점을 소개합니다. 이는 특정 참조 가치가 있습니다. 도움이 필요한 친구들이 참고할 수 있기를 바랍니다.

CSS에서 단어 줄 바꿈과 단어 나누기의 차이점은 무엇입니까?과 CSS에서 단어 줄 바꿈과 단어 나누기의 차이점은 무엇입니까?가 무엇인가요? 아직도 많은 사람들이 CSS에서 단어 줄 바꿈과 단어 나누기의 차이점은 무엇입니까?:break-word;CSS에서 단어 줄 바꿈과 단어 나누기의 차이점은 무엇입니까?:break-all만 기억하고 있다고 생각합니다. thing은 문장을 강제로 나누는 데 사용됩니다. 아니면 이 두 가지가 너무 발음하기 어렵고 비슷해 보여서 기억하기 어렵기 때문일 수도 있습니다.

그럼 뭔데요? Mozilla 공식 웹사이트에서 다음 설명을 찾았습니다:

CSS에서 단어 줄 바꿈과 단어 나누기의 차이점은 무엇입니까?

CSS에서 단어 줄 바꿈과 단어 나누기의 차이점은 무엇입니까?

두 설명 모두 단어 안의 줄바꿈과 같은 단어가 나타나는 것을 볼 수 있는데, 이는 단어 안의 줄바꿈과 관련이 있음을 나타냅니다. 그런 다음 위의 두 단락을 영어로 번역해 보겠습니다.

CSS에서 단어 줄 바꿈과 단어 나누기의 차이점은 무엇입니까?:

CSS의 CSS에서 단어 줄 바꿈과 단어 나누기의 차이점은 무엇입니까? 속성은 브라우저가 허용되는지 여부를 나타내는 데 사용됩니다. 문자열이 너무 길어서 고유 주기를 찾을 수 없는 경우 오버플로를 방지하기 위해 분할이 수행됩니다.

CSS에서 단어 줄 바꿈과 단어 나누기의 차이점은 무엇입니까?:

CSS의 CSS에서 단어 줄 바꿈과 단어 나누기의 차이점은 무엇입니까? 속성은 단어 내에서 문장을 분리하는 방법을 나타내는 데 사용됩니다.

위의 두 번역 사이에서 읽기 힘든 차이점을 발견한 것 같습니다. CSS에서 단어 줄 바꿈과 단어 나누기의 차이점은 무엇입니까?은 단어 내에서 문장 분리를 허용할지 여부를 강조하는 반면, CSS에서 단어 줄 바꿈과 단어 나누기의 차이점은 무엇입니까?는 단어 내에서 문장을 분리하는 방법을 강조합니다. 파편.

그런데 아직은 명확하지 않은 것 같습니다. 표현력이 부족한 아이들은 상처를 받을 수 없습니다.

먼저 단어내분할이란 무엇인가? 물론 이것들은 모두 스페인어 단어입니다.

단어 내 분할이 없는 경우입니다. 단어가 너무 길어서 이를 감싸는 컨테이너가 넘칩니다.

단어 내 문장 분할, 즉 단어를 두 줄로 분할하는 경우입니다.

우선, 단어 줄바꿈이나 단어 분리가 추가되지 않은 경우, 한 줄의 남은 공간이 들어갈 수 없을 정도로 단어가 긴 경우, 이는 브라우저의 기본 설정입니다. 그런 다음 브라우저는 단어를 다음 줄로 이동합니다:

word..d 우리가 만든 이 단어는 원래 long 바로 뒤에 있어야 하는데, long 뒤에는 공간이 부족합니다. 왼쪽으로, 단어는 기본적으로 분리될 수 없으므로 브라우저는 아래로 이동하기 위해 겸손해야 합니다.

이 긴 단어는 적어도 그것을 감싸는 요소의 길이를 초과하지 않기 때문에 비정상적인 것으로 간주되지 않지만, 길이를 초과하면 어떻게 될까요?

앞서 언급했듯이 한도를 초과하면 부모 컨테이너 외부로 오버플로됩니다. 지금은 잘릴 수 없으므로 그냥 할 수 있습니다. 서둘러 나가세요.

여기서 wordwrap이 유용합니다. 이 텍스트에 CSS에서 단어 줄 바꿈과 단어 나누기의 차이점은 무엇입니까?:break-word를 추가하고 무슨 일이 일어나는지 살펴보겠습니다

하하, 여기로 돌아오세요. 말이 길면 끊어도 상관없습니다.

이렇게 긴 단어가 넘쳐나는 것을 방지하기 위해 그 안에 문장을 깨뜨려 놓았습니다. 이것이 CSS에서 단어 줄 바꿈과 단어 나누기의 차이점은 무엇입니까?:break-word가 하는 일입니다.

CSS에서 단어 줄 바꿈과 단어 나누기의 차이점은 무엇입니까?의 브라우저 지원을 살펴보면:

아주 좋습니다. 거의 모든 브라우저가 지원합니다.

좋아, 이제 말할 수 있습니다. 이미 단어 줄 바꿈이 있는데 단어 줄 바꿈이 필요한 이유는 무엇입니까?

악한 자본가들은 늘 노동자들의 모든 것을 짜내려고 합니다. 보세요, 아래 사진에는 공백이 있는 것 아닌가요? 정말 낭비입니다. . .

네, 오랜만에 짧은 단어 몇 개 넣을 여지가 있는데, 다 냄새나고 변태적인 긴 단어들이에요!

그래서 IE는 정말 배려심이 깊습니다. 더 이상 혼내지 마세요. 공간을 조금도 낭비하지 않는다는 문제를 고려하여 단어 분리를 만들었습니다. 이제 CSS에서 단어 줄 바꿈과 단어 나누기의 차이점은 무엇입니까?:break-all;을 사용하면 어떤 일이 일어나는지 살펴보겠습니다.

무슨 일이 일어났는지 보셨나요? 왜곡된 긴 단어는 다음 줄로 이동하지 않고 바로 long 뒤에 배치된 후 상위 컨테이너의 오른쪽 테두리에서 연결이 끊어졌습니다. 따라서 공간을 낭비하지 않습니다.

CSS에서 단어 줄 바꿈과 단어 나누기의 차이점은 무엇입니까?:break-all에 대한 브라우저 지원을 살펴보겠습니다.

오페라를 제외하고는 모두 지원됩니다(Firefox는 한 번도 지원하지 않았습니다). 지원)으로 변경되었습니다!

앞서 말씀드린 것처럼 단어 내에서 문장 분할을 허용할지 여부를 결정하기 위해 CSS에서 단어 줄 바꿈과 단어 나누기의 차이점은 무엇입니까?을 사용합니다. 허용하지 않으면 긴 단어가 넘치게 됩니다. 가장 중요한 점은 다음 줄의 너비가 충분한지 확인하기 위해 먼저 다음 줄로 이동하려고 시도한다는 것입니다. 그렇지 않으면 단어 내의 문장을 분할합니다.

그리고 CSS에서 단어 줄 바꿈과 단어 나누기의 차이점은 무엇입니까?:break-all은 더욱 비정상적입니다. 문장을 나누는 방식이 매우 거칠기 때문입니다. 긴 단어를 다음 줄로 옮기려고 하지 않고, 단어 내의 문장을 직접 끊습니다. 이는 또한 해당 기능이 문장을 끊는 방법을 결정하는 것인 이유를 설명할 수 있습니다. 즉, CSS에서 단어 줄 바꿈과 단어 나누기의 차이점은 무엇입니까?:break-all을 사용하는 것은 문장을 끊는 대략적인 방법을 사용하는 것과 동일합니다. 한마디로, 더 많은 공간을 절약하려면 CSS에서 단어 줄 바꿈과 단어 나누기의 차이점은 무엇입니까?:break-all을 사용하세요!

그러나 어쨌든 단어 내의 문장 조각화는 서양 텍스트의 가독성에 일정한 영향을 미칠 수 있습니다.

ps: 인터넷의 일부 기사에서는 CSS에서 단어 줄 바꿈과 단어 나누기의 차이점은 무엇입니까?:break-word가 긴 영어 문자열에서는 작동하지 않는다고 말합니다. 사실 이것은 매우 잘못된 것입니다. 긴 영어 또는 숫자 문자열은 여러 줄로 분할됩니다. 실제로 CSS에서 단어 줄 바꿈과 단어 나누기의 차이점은 무엇입니까?:break-word와 CSS에서 단어 줄 바꿈과 단어 나누기의 차이점은 무엇입니까?:break-all의 공통점은 긴 단어를 강제로 문장으로 나눌 수 있다는 것입니다. 차이점은 CSS에서 단어 줄 바꿈과 단어 나누기의 차이점은 무엇입니까?:break-word가 먼저 새 줄을 시작한다는 것입니다. 긴 단어를 여전히 새 줄에 넣을 수 없는 경우, 긴 단어는 문장을 강제로 중단하게 됩니다. CSS에서 단어 줄 바꿈과 단어 나누기의 차이점은 무엇입니까?:break-all은 긴 단어를 새 줄에 넣지 않습니다. 줄을 놓을 수 없으면 문장이 강제로 끊어집니다.

css 코드:

.p1{
  background:#000; width:100px; color:#F00; CSS에서 단어 줄 바꿈과 단어 나누기의 차이점은 무엇입니까?:break-word
}
.p2{
  background:#000; width:100px; color:#F00; margin-top:10px; CSS에서 단어 줄 바꿈과 단어 나누기의 차이점은 무엇입니까?:break-all
}

HTML 코드:

<p class="p1" data-mce-style="background: #000; width: 100px; color: #f00; CSS에서 단어 줄 바꿈과 단어 나누기의 차이점은 무엇입니까?: break-word;">
haha 555555555555555555555555555555555
</p>
<p class="p2" data-mce-style="background: #000; width: 100px; color: #f00; margin-top: 10px; CSS에서 단어 줄 바꿈과 단어 나누기의 차이점은 무엇입니까?: break-all;">
haha 555555555555555555555555555555555
</p>

위는 이 장의 전체 내용이므로 직접 컴파일해 볼 수 있습니다.