>  기사  >  웹 프론트엔드  >  text-align:justify를 사용하여 양쪽 끝을 정렬하는 예_체험 교환

text-align:justify를 사용하여 양쪽 끝을 정렬하는 예_체험 교환

WBOY
WBOY원래의
2016-05-16 12:07:171425검색

text-align:justify는 여러 줄에서 마지막이 아닌 줄의 양쪽 끝만 정렬할 수 있습니다. 한 줄에 대해서는 할 수 있는 일이 없습니다. IE는 문제를 해결하기 위해 텍스트 양쪽 정렬을 사용합니다. 그런데 IE가 아닌 사용자에게는 제 방법이 쓸모가 없습니다. 왜냐하면 이 방법은 특별한 경우에만 사용되기 때문입니다.

예제 소스 코드 [www.52css.com]
.justify{
height:1.1em;
overflow:hidden
text-align:justify
text; -justify :distribute-all-lines;
}
div.cn:after {
content: "________________________________________";
font-size:100px;
}
맞습니다 IE에서는 콘텐츠를 사용하고 두 번째 행이 생길 때까지 콘텐츠를 추가하여 첫 번째 행의 양쪽 끝이 정렬되도록 합니다.

하지만 각 브라우저는 중국어를 다르게 이해합니다. Firefox는 한자를 직접 구분하지만, Opera는 한자를 구분하지 않고 공백만 인식합니다. 한자 중간에 영문이나 라벨을 삽입하면 Safari가 Opera에 더 가깝습니다. 공백을 추가하지 않고는 분리할 수 없습니다.

공백만 사용하여 단어를 구분할 수 있기 때문에 영어가 더 좋지만 IE에서는 text-justify :distribute-all-lines를 사용하여 단어를 구분하는데 정말 보기 흉합니다. 원래는 IE를 돕기 위해 htc나 js를 사용하려고 생각했는데, 집에 IE7이 없으면 어떻게 해야 할지 모르겠습니다.

또는 공백을 입력하는 것이 더 좋은 방법이지만 텍스트만 확대하는 Firefox와 같은 브라우저는 텍스트를 확대하면 XX가 됩니다. 한마디로 기억하세요. 생명을 유지하고 Firefix를 멀리하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.