나는 현재 두 가지의 차이점이 무엇인지 궁금합니다. 두 가지를 모두 사용할 때 용기에 맞지 않으면 단어가 깨지는 것 같습니다. 그러나 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
것 즉 포장 및 용기 내에 피팅 테이블 초래한다.
답변
이것이 내가 찾을 수있는 전부입니다. 그것이 도움이되는지 확실하지 않지만 믹스에 추가 할 것이라고 생각했습니다.
줄 바꿈
이 속성은 내용이 요소에 대해 지정된 렌더링 상자의 경계를 초과 할 경우 현재 렌더링 된 줄이 끊어 질지 여부를 지정합니다 (일부 방식에서는 ‘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
nebreak-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