CSS를 사용하여 영어 단어 자동 줄 바꿈 문제를 해결하는 방법

테이블/레이어가 터지거나 단어가 깨지는 것을 방지합니다.

영어 단어 자동 줄 바꿈 문제는 많은 사람들을 괴롭혔다고 할 수 있습니다. 단어를 오랫동안 쓰면 테이블이 깨지고, 잘 처리하면 영어 단어가 갈라집니다.

테이블 깨지는 걸 방지하는

인터넷에 있는 대부분의 기사에 따르면 다음을 추가하면 됩니다.
암호
...........

테이블 {

테이블 레이아웃:고정;word-break:break-all;word-wrap:break-word;}

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

이렇게 하면 테이블과 레이어가 깨지는 문제를 해결할 수 있습니다. 그러나 이러한 코드는 문제를 일으킬 것입니다. 모든 영어 단어가 잘려서 영어 쓰기 습관에 맞지 않고 읽기에 도움이 되지 않습니다.

나중에 위의 코드를 다시 작성하면 테이블/레이어가 모두 깨지는 것과 단어가 깨지는 것을 방지할 수 있다는 것을 알게 되었습니다.
다음과 같이:
코드

테이블 {
테이블 레이아웃: 고정;
단어 줄바꿈:단어 나누기;
}
div {
단어 줄바꿈:단어 나누기;
}
http://font.knowsky.com/

이것은 제가 지금 사용하는 코드이기도 합니다.
------------------------------------- ---

단어 분리 버전

에 따르면

단어 중단: 일반 | 모두 유지 |
값:
보통: 기본값입니다. 단어 사이에 줄 바꿈 허용
break-all : 이 동작은 아시아 언어의 일반적인 동작과 동일합니다. 비아시아 언어 텍스트 줄의 모든 단어 내에서의 구분도 허용됩니다. 이 값은 일부 비아시아 텍스트가 포함된 아시아 텍스트에 적합합니다.
keep-all : 모든 비아시아 언어의 경우와 동일합니다. 중국어, 한국어, 일본어의 경우 단어 구분이 허용되지 않습니다.

소량의 아시아 텍스트가 포함된

비아시아 텍스트 설명에 적합합니다

객체 내의 텍스트에 대한 단어 줄 바꿈 동작을 설정하거나 검색합니다. 특히 여러 언어가 나타날 때.
중국어의 경우 break-all을 사용해야 합니다.
이 속성은 currentStyle 객체에 대해 읽기 전용입니다. 다른 객체에서 읽고 쓸 수 있습니다.
해당 스크립트 기능은 wordBreak입니다.
예:
div {단어 나누기 : 모두 나누기 }
적용 대상:
IE5.0+

단어 줄 바꿈 버전: IE5.5+ 독점 속성 상속: 예 구문:
단어 줄 바꿈 : 일반 |
값:
보통: 기본값입니다. 콘텐츠가 지정된 컨테이너 경계를 넘어 확장되도록 허용
break-word : 콘텐츠가 경계 내에서 중단됩니다. 필요한 경우 단어 분리도 발생합니다

.
현재 줄이 지정된 컨테이너의 경계를 초과할 때 줄을 끊을지 여부를 설정하거나 검색합니다.
이 속성은 블록 객체와 같은 레이아웃 객체에서만 작동합니다. 인라인 요소에 이 속성을 사용하려면 먼저 객체의 높이 또는 너비 속성을 설정하거나, 위치 속성을 절대값으로 설정하거나, 표시 속성을 블록으로 설정해야 합니다.
이 속성은 currentStyle 객체에 대해 읽기 전용입니다. 다른 객체에서 읽고 쓸 수 있습니다.
해당 스크립트 기능은 wordWrap입니다.
예:
div { 단어 줄바꿈: 단어 나누기; 단어 나누기: 모두 나누기 }

이것에 주의하세요
break-word : 콘텐츠가 경계 내에서 중단됩니다. 필요하다면 단어 내 줄바꿈(word-break)도 발생하므로

단어 줄바꿈이면 충분하지만, 기본적으로 단어 나누기는 분리되지 않지만, 잘못된 버전 등 매우 긴 단어가 있는 경우에는 가능합니다. 지난번 역사상 가장 긴 단어, 무서운 12개의 영어단어, 줄도 쪼개어 테이블이 손상되는 것을 방지할 수 있습니다.
그러나 이것은 w3c에서 CSS2 표준으로 채택되지 않았으므로 Mozilla는 이 속성을 지원하지 않습니다. 매우 긴 단어, Mozilla Firefox는 줄을 끊지 않고 깨질 것입니다.
CSS3가 이 속성을 받아들일지는 모르겠지만 솔직히 너무 BT적인 단어가 더 좋습니다...