오버 플로우 랩과 단어 분리의 차이점은 무엇입니까?

Question 1

What's 사이의 정확한 차이 overflow-wrap/ word-wrap과 word-break? 그리고 누구든지 아주 긴 링크를 끊는 데 더 좋은 것이 무엇인지 말해 줄 수 있습니까? 대부분의 사람들은 단어 분리를와 함께 사용해야한다고 말하지만 overflow-wrap그다지 논리적으로 보이지는 않습니다. 더 나은 크로스 브라우저 지원 overflow-wrap을 word-wrap위해 와 함께 사용 하는 것이 가장 좋은 방법 이라고 생각 합니다. 어떻게 생각해?

Question 2

출처에서 인용

단어 줄 바꿈 : 단어 줄 바꿈 CSS 속성은 분리 할 수없는 문자열이 너무 길어 포함 상자에 맞지 않을 때 오버플로를 방지하기 위해 브라우저가 단어 내에서 줄을 끊을 수 있는지 여부를 지정하는 데 사용됩니다.
overflow-wrap : CSS3 텍스트 사양의 현재 초안에서 word-wrap속성 이름이 변경 overflow-wrap되었습니다.
단어 분리 : 단어 분리 CSS 속성은 단어 내에서 줄을 분리하는 방법 (또는 경우)을 지정하는 데 사용됩니다.

따라서 올바른 조합 인 단어 줄 바꿈과 함께 단어 분리가 필요합니다.

Question 3

이 시점에서이 word-break: break-word실제로 overflow-wrap: anywhere.

word-break: break-word공식적으로 사용되지 않습니다. CSS 텍스트 모듈 레벨 3 작업 초안을 참조하십시오 .

레거시 콘텐츠와의 호환성을 위해이 word-break속성은 더 이상 사용되지 않는 break-word키워드 도 지원 합니다. 지정된 경우,이 같은 효과를 갖는다 word-break: normal와 overflow-wrap: anywhere관계없이 오버플 랩 속성의 실제 값.

여기서주의 할 점은이 word-break: break-word별칭입니다 overflow-wrap: anywhere, NOT 별명에 대한overflow-wrap: break-word .

( word-break: normal는의 기본값 일 뿐이 word-break므로에 대해 다른 값을 설정하지 않는 한 무시해도됩니다.word-break .)

어떻게 overflow-wrap: anywhere그리고overflow-wrap: break-word 다른가요?

둘 사이의 문서에서 유일한 차이점 overflow-wrap: anywhere은 "최소 내용 고유 크기를 계산"할 때 "단어 나누기에서 도입 된 소프트 랩 기회를 고려"하는 반면 overflow-wrap: break-word그렇지 않다는 것입니다.

나는 그것을 고려한다면 어떤 경우에는 너비가 더 정확할 것이라고 생각합니까?

Question 4

정확한 차이점은 다음과 같습니다. (Chrome v81에서 테스트하고 사양을 참조하여 관찰 내용을 확인한 결과)

공백

normal(기본값) : 공백 체인 및 줄 바꿈을 축소합니다. 필요한 곳에 줄 바꿈을 추가합니다
nowrap: 공백 체인과 줄 바꿈을 축소합니다. 줄 바꿈을 추가하지 않음
pre-line: 공백 체인을 축소합니다. 필요한 곳에 줄 바꿈을 추가합니다
pre-wrap. 필요한 곳에 줄 바꿈 추가 : 줄 바꿈 추가
break-spaces를 트리거 할 수있는 공백을 제외하고 사전 줄 바꿈 과 동일
pre: 축소 없음; 줄 바꿈을 추가하지 않습니다

참고 : 선택한 white-space값에 "줄 바꿈 추가 안 함"이 나열되면 다음 속성의 줄 바꿈 동작을 적용 할 수 없습니다 (즉, 무시 됨).

단어 나누기

normal(기본값) : 컨테이너 내 마지막 단어 맞춤의 끝에서 줄을 끊습니다 [존재하는 경우], 그렇지 않으면 줄이 끊기지 않은 채로 남음
break-word: 컨테이너 내에서 마지막 단어 맞춤의 끝에서 줄을 끊습니다 [존재하는 경우], 그렇지 않으면 컨테이너의 끝
break-all에서 줄을 끊습니다. 컨테이너의 끝 [가까운 공백이 있어도 단어를 분할 할 수 있음]

overflow-wrap (레거시 이름 : word-wrap)

normal(기본값) : 컨테이너 내 마지막 단어 맞춤의 끝에서 줄을 끊습니다 [존재하는 경우], 그렇지 않으면 줄이 끊기지 않은 상태로 남음
break-word: 컨테이너 내 마지막 단어 맞춤의 끝에서 줄을 끊습니다 [존재하는 경우], 그렇지 않으면 컨테이너의 끝에서 줄을 끊습니다. -flex container], else line left unbroken
anywhere: 컨테이너 내 마지막 단어의 끝에서 줄을 끊고 [존재하는 경우] 그렇지 않으면 컨테이너 끝에서 줄을 끊습니다 word-break: break-word.

주 동안 그 overflow-wrap: break-word, 파손되지 않는 선 플렉스 컨테이너가 지정한 플렉스 비율 이상으로 확장 될 수 있습니다 (너무 오래 컨테이너 잎 라인이 있음을 어떤 조합으로) (다른 플렉스 컨테이너를 강요하는 것은 너무 긴 내용을 설명하기 축소하기).