CSS3의 word-wrap 속성 사용에 대한 자세한 설명과 예

우리 모두는 word-wrap attribute이 CSS3의 새로운 속성이라는 것을 알고 있으므로 이번 글에서는 word-wrap 속성의 사용법과 사용 시 주의사항에 대해 자세히 설명하겠습니다. 짧은 목록 .

1. 긴 단어나 URL 주소가 다음 줄로 넘어가도록 하려면

word-wrap 속성을 정의하세요.

2. 구문 및 매개변수

word-wrap: 일반(기본값) | break-word 일반: 콘텐츠가 지정된 컨테이너 경계를 벗어나도록 허용합니다. 현재 줄에 표시되며 줄 바꿈되지 않습니다). break-word: 내용이 경계 내에서 줄바꿈됩니다. 단어가 현재 줄에 맞지 않으면 자동으로 다음 줄로 전환됩니다. 필요한 경우 word-break가 실행됩니다. (참고: word-break를 구별하세요. break-word는 서로 다른 것입니다. 하나는 속성이고 다른 하나는 매개변수입니다. 참고: 모든 브라우저에서 이를 인식할 수 있습니다.

3. 설명

word-wrap은 "단어에 대한 줄바꿈" 여부를 제어하고, 현재 줄이 지정된 컨테이너의 경계를 초과할 때 줄바꿈 여부를 설정하거나 검색합니다. 중국어도 문제 없고, 영어 문장도 문제 없습니다. 그러나 긴 영어 문자열의 경우에는 작동하지 않습니다.

4. 예

congratulation 이 단어는 영어 단어의 긴 문자열에 속합니다. word-wrap:break-word는 전체 단어를 표시할 만큼 줄 끝이 넓지 않은 경우, 단어를 자르지 않고 전체 단어를 다음 줄에 자동으로 배치하므로 긴 텍스트 문자열에서는 작동하지 않습니다. word-wrap:normal이 기본값이며, 영어 단어는 분리되지 않습니다.

5. 요약

작업 범위는 div와 같은 표준 블록 수준 요소뿐입니다. th 및 td와 같은 테이블 요소는 인식되지만 효과가 없습니다(td인 경우 th와 너비 word-wrap은 IE에서 작동할 수 있습니다. 그러나 완전한 호환성과 편리한 기억의 관점에서 볼 때 이전 결론이 우선합니다).

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

관련 읽기:

CSS를 사용하지 않고 마우스 오버 스타일을 변경하는 방법

HTML 웹 페이지 정렬 오류의 원인과 해결책

Js가 DOM 객체를 조작하는 과정

위 내용은 CSS3의 word-wrap 속성 사용에 대한 자세한 설명과 예의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!