나는 현재 두 가지의 차이점이 무엇인지 궁금합니다. 두 가지를 모두 사용할 때 용기에 맞지 않으면 단어가 깨지는 것 같습니다. 그러나 W3C는 왜 두 가지 방법을 사용 했습니까?

이들에 대한 이야기가 있다는 W3 사양 이 제안하는 것은 word-break: break-all반면, CJK (중국어, 일본어, 한국어) 텍스트가 특정 동작을 필요위한 word-wrap: break-word더 일반적인, 비 CJK 인식, 동작입니다.

word-wrap: break-word 최근에 overflow-wrap: break-word

• 다음 줄에 긴 단어를 줄 바꿈합니다.
• 중간에 깨지지 않도록 다른 단어를 조정합니다.

word-break: break-all

• 연속 단어인지 또는 여러 단어인지에 관계없이 너비 제한의 가장자리에서 분리합니다. (같은 단어의 문자 내에서도)

따라서 콘텐츠를 동적으로 가져 오는 고정 크기 범위가 많은 경우 사용하는 것이 좋습니다. word-wrap: break-word 연속 단어 만 사이에 구분되는 방식 하는 것이 좋으며 많은 단어로 구성된 문장의 경우 공백이 그대로 유지되도록 조정됩니다 (단어 내에서 휴식 없음).

그리고 그것이 중요하지 않다면, 어느 쪽이든 가십시오.

을 사용하면 word-break시작해야 할 시점에서 매우 긴 단어가 시작되고 필요한만큼 끊어집니다

[X] I am a text that 0123
4567890123456789012345678
90123456789 want to live 
inside this narrow paragr
aph.

그러나 함께 word-wrap, 매우 긴 단어는 시작해야하는 시점에서 시작되지 않습니다. 다음 줄로 감싸서 필요한만큼 끊어집니다.

[X] I am a text that 
012345678901234567890123
4567890123456789 want to
live inside this narrow 
paragraph.

word-wrapoverflow-wrap이 혼동을 피하기 위해 이름이 변경되었습니다 .

이제 이것이 우리가 가진 것입니다.

오버 플로우 랩

오버 플로우 랩의 속성은 브라우저가 달리 깨지지 않는 문자열이 포함 된 상자에 맞게 너무 긴 경우 오버 플로우 방지하기 위해 단어 내에서 줄 바꿈 할 수 있는지 여부를 지정하는 데 사용됩니다.

가능한 값 :

• normal : 줄이 일반 단어 구분 점에서만 끊어 질 수 있음을 나타냅니다.

• break-word : 줄에 허용되는 중단 점이 없으면 일반적으로 깨지지 않는 단어가 임의의 지점에서 끊어 질 수 있음을 나타냅니다.

소스 .

단어 나누기

워드 브레이크 CSS 속성은 단어 내에서 줄 바꿈할지 여부를 지정하는 데 사용됩니다.

• normal : 기본 줄 바꿈 규칙을 사용하십시오.
• break-all : 비 JJK (중국어 / 일본어 / 한국어) 텍스트의 경우 문자 사이에 단어 나누기를 삽입 할 수 있습니다.
• keep-all : CJK 텍스트에 단어 구분을 허용하지 않습니다. CJK 이외의 텍스트 동작은 일반과 동일합니다.

소스 .

이제 질문으로 돌아가서, 넘침 줄 바꿈 과 단어 구분 의 주요 차이점 은 첫 번째는 넘침 상황에서의 동작을 결정하고 나중에는 정상적인 상황 에서 동작을 결정한다는 것입니다 (오버플로 없음). 오버 플로우 용기가 텍스트를 저장할 공간이 충분하지 않을 때 상황이 발생합니다. 이 상황에서 줄 바꿈은 공간이 없기 때문에 도움이되지 않습니다 (고정 너비와 높이가있는 상자를 상상해보십시오).

그래서:

• overflow-wrap: break-word: 오버플로 상황에서 단어를 깰 수 있습니다.
• word-break: break-all: 정상적인 상황에서는 줄 끝에서 단어를 분리하십시오. 오버플로가 필요하지 않습니다.

table요소의 컨텐츠에 적용되는 경우 Firefox (v24) 및 Chrome (v30) 이상 :

word-wrap:break-word

실제로 긴 단어가 줄 바꿈되지 않으므로 테이블이 컨테이너의 경계를 초과 할 수 있습니다.

word-break:break-all

것 즉 포장 및 용기 내에 피팅 테이블 초래한다.

jsfiddle 데모 .

이것이 내가 찾을 수있는 전부입니다. 그것이 도움이되는지 확실하지 않지만 믹스에 추가 할 것이라고 생각했습니다.

줄 바꿈

이 속성은 내용이 요소에 대해 지정된 렌더링 상자의 경계를 초과 할 경우 현재 렌더링 된 줄이 끊어 질지 여부를 지정합니다 (일부 방식에서는 'clip'및 'overflow'속성과 비슷합니다). 요소가 시각적 렌더링을하는 경우 명시적인 높이 / 너비를 가진 인라인 요소이거나 절대 위치 및 / 또는 블록 요소입니다.

단어 브레이크

이 속성은 단어 내 줄 바꿈 동작을 제어합니다. 요소 내에 여러 언어가 사용되는 경우에 특히 유용합니다.

있어 큰 차이는. break-all읽을 수있는 텍스트를 렌더링하는 데 기본적으로 사용할 수 없습니다.

This is a text from an old magazine컨테이너 당 문자열 이 행 당 6 자에 불과 하다고 가정 해 봅시다 .

word-break: break-all

This i
s a te
xt fro
m an o
ld mag
azine

보시다시피 결과는 끔찍합니다. break-all가능한 한 많은 문자를 각 행에 맞추려고 시도합니다. 심지어 "is"와 같은 2 글자 단어를 2 행으로 나눕니다! 그것은 말도 안돼. 이것이 break-all거의 사용되지 않는 이유 입니다.

word-wrap: break-word

This
is a
text
from
an old
magazi
ne

break-word컨테이너에 맞추기에 너무 긴 단어 만 분리합니다 (예 : 8 자, "잡지", 컨테이너는 6 자에 해당). 그것은 컨테이너 전체에 맞는 단어를 깨뜨리지 않고 대신 새로운 줄로 밀어 넣습니다.

<div style="width: 100px; border: solid 1px black; font-family: monospace;">
  <h1 style="word-break: break-all;">This is a text from an old magazine</h1>
  <hr>
  <h1 style="word-wrap: break-word;">This is a text from an old magazine</h1>
</div

word-break:break-all :

단어를 계속 접경하고 줄 바꿈하십시오.

word-wrap:break-word :

처음에는 줄 바꿈으로 줄 바꿈 한 다음 계속 경계를 유지합니다.

예 :

div {
   border: 1px solid red;
   width: 200px;
}

span {
  background-color: yellow;
}

.break-all {
  word-break:break-all;
 }
.break-word {
  word-wrap:break-word;  
}

<b>word-break:break-all</b>

<div class="break-all">
  This text is styled with
  <span>soooooooooooooooooooooooooome</span> of the text
  formatting properties.
</div>

<b> word-wrap:break-word</b>

<div class="break-word">
  This text is styled with
  <span>soooooooooooooooooooooooooome</span> of the text
  formatting properties.
</div>

맥락 부족으로 인해 명확하지 않은 각각의 W3 사양 에서 다음을 추론 할 수 있습니다.

• word-break: break-all CJK (중국어, 일본어 또는 한국어) 문자 쓰기에서 외국어가 아닌 외국어 (예 : 서양어) 단어를 분리하기위한 것입니다.
• word-wrap: break-word 혼합되지 않은 (우리가 서구 적으로 만 말할 수있는) 언어로 된 단어 분리 용입니다.

적어도 이것들은 W3의 의도였습니다. 실제로 발생한 것은 브라우저 비 호환성으로 인한 중대한 문제였습니다. 여기에 관련된 다양한 문제에 대한 훌륭한 글이 있습니다.

다음 코드 스 니펫은 크로스 브라우저 환경에서 CSS를 사용하여 단어 줄 바꿈을 수행하는 방법을 요약 한 것입니다.

-ms-word-break: break-all;
 word-break: break-all;

 /* Non standard for webkit */
 word-break: break-word;

-webkit-hyphens: auto;
   -moz-hyphens: auto;
    -ms-hyphens: auto;
        hyphens: auto;

이전의 의견 외에도 브라우저 지원은에 word-wrap비해 약간 더 나은 것으로 보입니다 word-break.