CSS3에서 단어 분리 속성을 사용하는 방법에 대한 튜토리얼

우리는 CSS3에 매우 중요한 속성 word-break 속성이 있다는 것을 알고 있으므로 오늘은 모두에게 도움이 되도록 정의, 구문, 매개변수 및 word-break 사용에 대한 간단한 예를 소개하겠습니다. 이해하다.

1. 자동 줄 바꿈 처리 방법을 지정하려면

word-break 속성을 정의하세요. 팁: word-break 속성을 사용하면 브라우저가 어떤 위치에서든 줄을 끊도록 할 수 있습니다.

2. 구문 및 매개변수

word-break: 일반(기본값)|break-all|keep-all 일반: 아시아 및 비아시아 언어의 텍스트 규칙에 따라 단어 내에서 줄 바꿈이 허용됩니다. 경계선 한자는 줄 바꿈하고, 영어 단어는 줄 바꿈합니다. 단어가 너무 길면 테두리가 고정 속성인 경우 다음 부분이 표시되지 않습니다. break-all: 영어 단어를 강제로 자르고 새 줄을 강제로 실행할 수 있습니다. 동작은 아시아 언어의 일반적인 동작과 동일합니다. 비아시아 언어 텍스트 줄의 모든 단어 내에서의 구분도 허용됩니다. 이 값은 일부 비아시아 텍스트가 포함된 아시아 텍스트에 적합합니다. keep-all: 모든 비아시아 언어의 경우와 동일합니다. 중국어, 한국어, 일본어의 경우 단어 구분이 허용되지 않습니다. 즉, 중국어라면 앞뒤 문장부호 안의 한자구가 완전히 감싸지고, 영어 단어도 완전히 감싸진다. 참고: Firefox와 Opera는 이를 인식할 수 없습니다.

3. 설명

word-break: break-all은 브레이크 단어입니다. 단어가 경계에 도달하면 다음 문자가 자동으로 다음 줄로 이동합니다. 이는 주로 긴 영어 문자열 문제를 해결합니다(위의 word-wrap:break-word가 긴 텍스트 문자열에 대해 작동하지 않는다는 결함을 보완합니다).

4. 예

위의 congratulation이라는 단어를 계속해서 영어 단어의 긴 문자열에 속하면 word-break:break-all은 단어를 자르고 줄의 끝은 conra(앞쪽)와 같이 됩니다. -end 부분 of congratulation), 그리고 다음 줄 tulation(conguatulation)의 백엔드 부분입니다. Word-break:keep-all은 중국어, 일본어, 한국어 연속어를 의미합니다. 즉, 줄 바꿈 없이 이번에만 사용하면 중국어는 줄 바꿈이 되지 않습니다. (영어 문장은 정상입니다.)

5. 요약

작업 범위는 div와 같은 표준 블록 수준 요소뿐입니다. th 및 td와 같은 테이블 요소는 인식되지만 효과가 없습니다(Chrome, word-break에서 테스트됨). :break-all은 효과적이지만 완전한 호환성과 편리한 메모리의 관점에서 보면 이전 결론이 우선합니다. Firefox와 Opera는 Firefox의 th 및 td에서 단어 분리를 사용하는 효과는 물론 단어 분리도 인식할 수 없습니다.

이 사례를 읽으신 후 방법을 마스터하셨다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!

관련 읽기:

점차 빛나는 사각형 테두리를 만들기 위해 CSS3를 사용하여 구현하는 단계

CSS3의 애니메이션 속성을 사용하는 방법

H5를 사용하여 물방울 특수 효과를 만드는 방법에 대한 튜토리얼

위 내용은 CSS3에서 단어 분리 속성을 사용하는 방법에 대한 튜토리얼의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!