CSS에서 "워드-브레이크:브레이크-올"과 "워드-랩:브레이크-워드"의 차이점은 무엇입니까?

CSS에서 "워드-브레이크:브레이크-올"과 "워드-랩:브레이크-워드"의 차이점은 무엇입니까?

"word-break: break-all"과 "word-wrap: break-word"의 차이점은 무엇입니까?

둘 다 사용해보니 용기에 맞지 않으면 어기는 것 같았습니다.하지만 왜 W3C는 두 가지 방법을 사용했을까요?

word-wrap: break-word에 최에로변경된으로 되었습니다.overflow-wrap: break-word

• 긴 단어를 다음 줄로 묶습니다.
• 중간에 끊기지 않도록 여러 단어를 조정합니다.

word-break: break-all

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

동적으로의 스팬이 에는 따서동적로컨얻를고는크정스기많팬은경다있사수것니습선을호용할는하우라이으텐츠▁prefer▁using▁just▁which▁so다▁dynam있▁you▁fixed니-습▁might수▁spans따▁you▁manysize라▁get호ically▁have▁if를 사용하는 것을 선호할 수 있습니다.word-wrap: break-word그렇게 하면 연속적인 단어들만 중간에 끊어지고, 많은 단어들로 구성된 문장일 경우, 공백들은 온전한 단어들을 얻기 위해 조정됩니다(단어 안에서 끊기지 않음).

그리고 그게 문제가 되지 않는다면, 둘 중 하나를 선택하세요.

이것들에 대해 이야기하는 W3 규격은 다음을 시사하는 것 같습니다.word-break: break-all는 CJK한 동작을 이며, CJK(중국어, 일본어, 한국어) 텍스트로 특정한 동작을 요구하기 위한 것입니다.word-wrap: break-word보다 일반적인 비 CJK 인식 동작입니다.

와 함께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-wrap로 이름이 변경되었습니다.overflow-wrap아마도 이런 혼란을 피하기 위해서일 것입니다

이것이 바로 우리가 가진 것입니다.

넘쳐흐르는

overflow-wrap 속성은 브라우저가 단어 내에서 줄 바꿈을 수행할 수 있는지 여부를 지정하는 데 사용되며, 그렇지 않으면 끊길 수 없는 문자열이 포함된 상자에 들어가지 않을 때 오버플로를 방지합니다.

가능한 값:

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

• 브레이크워드:줄에 허용 가능한 중단점이 없을 경우 일반적으로 중단할 수 없는 단어가 임의의 점에서 중단될 수 있음을 나타냅니다.

출처.

말이 통하지 않는

word-break CSS 속성은 단어 내에서 줄 바꿈 여부를 지정하는 데 사용됩니다.

• normal: 기본 줄 바꿈 규칙을 사용합니다.
• Break-all: CJK(중국어/일본어/한국어)가 아닌 텍스트의 경우 임의의 문자 사이에 단어 구분을 삽입할 수 있습니다.
• keep-all:CJK 텍스트에 대해 단어 구분을 허용하지 않습니다.비CJK 텍스트 동작은 일반 텍스트 동작과 동일합니다.

출처.

---

이제 질문으로 돌아갑니다.오버플로 랩과 워드 브레이크의 주요 차이점은 첫 번째는 오버플로 상황에서 동작을 결정하는 반면, 후자는 일반 상황(오버플로 없음)에서 동작을 결정한다는 것입니다.컨테이너에 텍스트를 저장할 공간이 부족할 때 오버플로 상황이 발생합니다.이 상황에서 줄을 끊는 것은 공간이 없기 때문에 도움이 되지 않습니다(가로와 높이가 고정된 상자를 상상해 보십시오).

그래서:

• overflow-wrap: break-word넘칠 때는 말을 끊으세요.
• word-break: break-all일반적인 상황에서는 줄 끝에 있는 단어를 깨기만 하면 됩니다.오버플로는 필요하지 않습니다.

파이어폭스와 크롬에서는, 적도어 파이어폭스(v24 기준)및 Chrome(v30 기준)의table요소:

word-wrap:break-word

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

word-break:break-all

결과적으로 단어가 래핑되고 테이블이 컨테이너 안에 장착됩니다.

jfiddle 데모.

큰 차이가 있습니다.break-word컨테이너에 맞지 않는 단어만 해독합니다.하는 동안에break-all " 구분유발할 것입니다.

예

This is a text from an old magazine6자 너비의 컨테이너 안에 있는 단일 공간 글꼴로.

와 함께word-break: break-all대부분의 단어가 깨져 있고 읽을 수 없는 것처럼 보입니다.

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

무엇을break-all행 단위로 이동하여 남은 문자가 없을 때까지 각 행에 6자만 배치합니다.이것은 무자비하게 이것을 할 것이고, 심지어 "is"와 같은 두 글자 단어도 두 줄로 나눌 수 있습니다.이것은 정말 끔찍해 보이고, 저는 그것을 결코 텍스트를 렌더링하는 데 사용하지 않을 것입니다.

와 함께word-wrap: break-word: 어단만깨다니집긴다깨니긴.

This
is a
text
from
an old
magazi
ne

무엇을break-word하는 것이 훨씬 더 좋습니다.그것은 용기의 폭에 절대 맞지 않는 단어들만 부러뜨릴 뿐입니다.현재 행에 맞지 않는 단어는 다음 행으로 푸시됩니다.따라서 한 줄에 6자로 구성된 컨테이너의 경우 "매거진"과 같은 8자 단어를 깨야 하지만 "텍스트"와 같은 더 짧은 단어는 절대 깨지지 않습니다.

<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>

문맥이 부족하여 상당히 불분명한 각 W3C 사양에서 다음을 추론할 수 있습니다.

• word-break: break-allCJK(중국어, 일본어 또는 한국어) 문자로 된 외래어 비CJK(서양어) 단어를 구분하기 위한 것입니다.
• word-wrap: break-word는 혼합되지 않은(서양어로만) 언어의 단어 구분을 위한 것입니다.

적어도, 이것들은 W3C의 의도였습니다.실제로 일어난 일은 결과적으로 브라우저 비호환성에 대한 중대한 실패였습니다.여기 관련된 다양한 문제들에 대한 훌륭한 기록이 있습니다.

다음 코드 스니펫은 크로스 브라우저 환경에서 CSS를 사용하여 단어 래핑을 수행하는 방법에 대한 요약 역할을 할 수 있습니다.

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

 /* Nonstandard for WebKit */
 word-break: break-word;

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

이전 의견 외에도 에 대한 브라우저 지원은 에 대한 것보다 조금 더 나은 것 같습니다.

워드브레이크와 워드랩의 정의만으로도 쉽게 머리를 회전시킬 수 있지만, 특히 이 두 가지를 비교할 때 다음과 같이 생각하는 것이 훨씬 쉽습니다.

우선 오버플로를 사용하고 싶을 것입니다. auto를 사용하고 싶을 것입니다. 그리고 이것만 사용하면 됩니다. 임의의 줄 바꿈 위치를 갖는 것이 아니라 컨테이너의 텍스트를 스크롤해야 하는 것을 견딜 수 있다면 필요한 것일 수 있습니다.

그런 다음 이 컨텍스트에서 "단어"는 공백이 없는 문자열입니다.

word-break: break-all;

오버플로를 방지하면서 낭비되는 공간을 최소화하는 것이 우선이며, 단어가 깨지지 않도록 하기 때문에 올바른 여백을 제외하고는 다른 곳으로 둘러싸지 않습니다.또한 줄 바꿈을 포함된 텍스트의 공백으로 대체합니다.이것은 가능한 한 스크롤을 피하고 읽기에 충분한 너비의 용기를 사용하려는 경우에 유용합니다. 그러나 용기가 너무 좁으면 일반적으로 결과가 매우 만족스럽지 않습니다. Drkawashima가 지적한 것처럼.

단어 구분/단어 구분: 브레이크워드;

오버플로를 방지하면서 임의의 단어와 모든 단어를 끊지 않고 유지하는 우선순위를 지정합니다. 따라서 단어가 줄의 나머지 부분에 맞지 않을 경우 단어가 먼저 랩되고 위의 줄을 한 글자만큼 짧게 남겨두더라도 다음 줄에 텍스트의 나머지 부분을 맞추려고 합니다.이 기능은 스크롤을 최대한 피하면서 최대의 가독성을 원하는 경우에 유용하며, 충분한 너비의 용기를 사용하지 않을 경우 오버플로: auto만 사용할 수 있습니다.

워드랩과 관련하여, 그것은 실제로 대체되지 않았습니다(그리고 아마도 전 세계적으로 사용되는 브라우저에서 오버플로랩보다 더 보편적으로 인식될 수도 있습니다). 원래 표준에 정의되지 않았지만 모든 큰 브라우저와 많은 웹 페이지가 이미 워드랩을 채택했기 때문에 오버플로랩의 별칭이 되었습니다.

그러나 널리 사용되기 때문에 오버플로 랩을 정의할 때 폐기되지 않고 현재의 별칭으로 정의되며, 레거시 이유로 UA(User-Agents, 예: 웹 브라우저)는 워드 랩을 오버플로 랩 속성의 레거시 이름 별칭으로 처리해야 합니다.그래서 그것은 W3C의 사실상의 표준이 되었고 그것은 곧 사라지지 않을 것입니다(아마도 W3C 표준이 멸종되거나 AI가 있는 봇에 의해 전체 웹이 보편적으로 업데이트될 때).

5.5. 오버플로 래핑: 오버플로 래핑/워드 래핑 속성

오버플로 랩(MDN)

overflow-breading: 브레이크워드;

언급

오버플로 랩(MDN)

CSS의 word-break 속성은 줄의 끝에 도달할 때 단어를 끊거나 분할하는 방법을 지정하는 데 사용됩니다.word-wrap 속성은 긴 단어를 분할/분할하여 다음 줄로 묶는 데 사용됩니다.

"word-break: break-all;"과 "word-wrap: break-word;"의 차이

word-break: break-all;:오버플로를 방지하기 위해 임의의 문자에서 단어를 구분하는 데 사용됩니다.

단어 구분: 구분 단어;:오버플로를 방지하기 위해 임의의 지점에서 단어를 구분하는 데 사용됩니다.

언급URL : https://stackoverflow.com/questions/1795109/what-is-the-difference-between-word-break-break-all-versus-word-wrap-break