CSS 제어 강제 줄 바꿈 솔루션

1. 문제 발견
일반적인 상황에서 요소에는 기본 공백: 일반(자동 줄 바꿈, 공백: 줄 바꿈이 아닌 경우 줄 바꿈)이 있습니다. 입력된 텍스트가 정의된 너비를 초과하면 그러나 입력된 데이터가 공백 없이 문자 또는 숫자로 구성된 경우(일반 데이터는 없어야 하지만 일부 테스터는 이런 방식으로 수행함) 컨테이너 너비를 초과하면 컨테이너가 자동으로 래핑됩니다. 줄 바꿈 없이 확장되었습니다.

2. 해결 방법
div를 예로 들어
div{
word-break:break-all;
word-wrap:break-word;
}

3. 차이점 설명
① 잘림의 이해
word-break:break-all
div의 너비가 200px이면 내용이 자동으로 200px로 줄바꿈됩니다. 줄 끝에 아주 긴 영어 단어 "congratulation"이 있는데, 줄 끝이 "conra"이고 다음 줄이 "tulation"이 되도록 단어가 잘립니다.

word-wrap:break-word
예제는 위와 동일하지만 줄 끝의 너비가 충분하지 않은 경우 전체 단어를 축하한다는 차이점이 있습니다. 전체 단어를 표시하면 자동으로 전체 단어를 축하합니다. 단어를 자르지 않고 다음 줄에 입력합니다.

② 지원 버전
word-break;break-all 지원 버전: IE5 이상 이 동작은 아시아 언어의 일반적인 동작과 동일합니다. 비아시아 언어 텍스트 줄의 모든 단어 내에서의 구분도 허용됩니다. 이 값은 일부 비아시아 텍스트가 포함된 아시아 텍스트에 적합합니다.
word-wrap:break-word 지원 버전: IE5.5 이상 콘텐츠는 경계 내에서 래핑됩니다. 필요한 경우 단어 분리도 발생합니다. 테이블이 늘어나는 것을 방지하기 위해 자동으로 포장됩니다.

3 구문
word-break: Normal | break-all | keep-all
normal: 아시아 및 비아시아 언어의 텍스트 규칙에 따라 단어 내 줄 바꿈이 허용됩니다.
break-all : 동작은 아시아 언어의 경우와 동일합니다. 비아시아 언어 텍스트 줄의 모든 단어 내에서의 구분도 허용됩니다. 이 값은 일부 비아시아 텍스트가 포함된 아시아 텍스트에 적합합니다.
keep-all : 모든 비아시아 언어에 대한 일반 값과 ​​동일합니다. 중국어, 한국어, 일본어의 경우 단어 구분이 허용되지 않습니다. 소량의 아시아 텍스트가 포함된 비아시아 텍스트에 적합

word-wrap: Normal | break-word
normal: 콘텐츠가 지정된 컨테이너 경계를 깨도록 허용
break-word: Content 경계 내에서 래핑됩니다. 필요한 경우 word-break도 발생합니다. 설명: 현재 줄이 지정된 컨테이너의 경계를 초과할 때 줄을 끊을지 여부를 설정하거나 검색합니다.

4. 주의사항
① 줄 바꿈 제어 중 하나가 유효하지 않다고 판단되면 두 개를 작성합니다. 예를 들어 td{ word-break:break-all;word-wrap:break-word }
②word-break는 3C에서 감지되면 문제를 표시하며 이는 Baidu 스냅샷에서도 문제를 일으킵니다. OPERA FIREFOX 브라우저에서는 word-break 속성을 white-space:normal로 대체할 수 있으므로 FireFox 및 IE에서는 줄 바꿈을 수정할 수 있습니다. 또한 단어 사이의 공백을 대신 사용할 수 없다는 점에 유의해야 합니다. 줄 바꿈이 올바르지 않습니다.

위 내용은 CSS 제어 강제 줄 바꿈 솔루션의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!