집 > 기사 > 웹 프론트엔드 > CSS에서 긴 영어 단어의 페이지 표시 문제를 해결하는 방법은 무엇입니까?

CSS에서 긴 영어 단어의 페이지 표시 문제를 해결하는 방법은 무엇입니까?

php中世界最好的语言원래의: 2018-02-28 10:01:591501검색

간단히 말하면

페이지 레이아웃에서 긴 영어 단어가 단락 컨테이너를 넘나드는 상황을 자주 접하게 됩니다. 이 문제를 해결하는 방법은 무엇입니까? 이제 다음 비교 데모 프로그램이 컴파일됩니다.

데모 프로그램

42du.cn-온라인 데모 프로그램

html 코드의 일부

<div class="block">    <h4>word-break:break-all;</h4>    <p class="break-all">Extraordinarily longlong word!</p></div>
CSS代码
 .break-all {    word-break: break-all;}.break-word {    word-wrap: break-word;}.hyphens {    word-wrap: break-word;    -webkit-hyphens: auto;    -ms-hyphens: auto;    hyphens: auto;}

문제

영어 단락의 조판에서 긴 영어 단어가 자주 발견됩니다. 기본적으로 단어가 컨테이너 경계에 도달하면 자동으로 다음 줄로 이동됩니다. 그리고 단일 단어의 길이가 컨테이너의 너비보다 크면 컨테이너 경계를 넘나들게 됩니다. 문서의 데모 첫 번째 부분, 페이지 길이가 컨테이너 경계를 초과하는 경우를 참조하세요.

CSS에서 단어 줄 바꿈하면 자연스럽게 단어 분리와 단어 줄 바꿈이 떠오릅니다. 구체적인 차이점은 시연의 두 번째 부분과 세 번째 부분을 비교하면 확인할 수 있습니다.

word-break: break-all;

데모의 두 번째 부분에 표시된 위의 진술입니다. 단어 형식이 컨테이너 경계에 도달하면 단어가 두 부분으로 나뉘고 뒷부분은 다음 줄로 이동하여 표시됩니다. 문단 오른쪽이 이렇게 깔끔하게 정리되어 있어서 효과도 맘에 듭니다. 그러나 break-all을 사용하면 줄 끝의 많은 단어가 깨지게 되어 읽기 환경에 영향을 줍니다.

word-wrap: break-word;

데모의 세 번째 부분에 표시된 위의 설명입니다. 단어 형식이 컨테이너 경계에 도달하면 먼저 표시하기 위해 단어가 다음 줄로 이동됩니다. 단어 길이가 줄 너비를 초과하면 단어가 끊어집니다. 즉, 인라인 단절을 우선으로 하고, 인라인 단절이 안될 경우 워드 단절을 사용한다. 이렇게 하면 조판 문단의 오른쪽 부분이 깔끔하게 정리되지 않고 공백이 생기지만, 많은 단어가 깨지거나 넘치게 되는 현상은 발생하지 않습니다.

하이픈: auto;

데모의 네 번째 부분에 표시된 위의 문입니다. 한 단계 더 나아가 끊어진 단어에 하이픈(-)을 추가하려면 하이픈: auto를 사용하면 됩니다. 그러나 이 문장의 호환성은 현재 매우 좋지 않습니다.

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