여러 브라우저에서 DIV의 마지막 텍스트 줄을 정렬하려면 어떻게 해야 합니까?

DIV의 마지막 줄 정렬

원래 쿼리에서 제기된 논리적 문제에도 불구하고 텍스트 정렬 방법을 명확히 할 수 있습니다. DIV. 일반적으로 이 터미널 줄은 텍스트 정렬 규칙을 따르지 않고 왼쪽으로 정렬되는 경우가 많습니다.

이 문제를 해결하기 위해 우리는 IE6 이상 버전을 포함한 여러 브라우저에서 호환되는 포괄적인 솔루션을 제시합니다.

크로스 브라우저 방식

이 방식은 두 가지 키를 활용합니다. 기술:

text-align-last: justify;: 이 CSS 속성은 블록 수준 요소에서 텍스트의 마지막 줄을 정렬하도록 특별히 설계되었습니다. 그러나 이는 Internet Explorer에서만 지원됩니다.

:after Pseudo-Content with Inline-Block:

이 기술은 :after 의사 요소를 사용하여 DIV 다음에는 보이지 않는 인라인 블록 요소입니다. 그런 다음 이 요소는 너비가 100%가 되도록 스타일이 지정되어 DIV의 전체 너비를 효과적으로 차지하고 텍스트가 최대한 정렬되도록 합니다.

CSS 구현

p, h1 {
   text-align: justify;
   text-align-last: justify;
}

p:after, h1:after {
   content: "";
   display: inline-block;
   width: 100%;
}

단일 처리 -줄 텍스트

DIV에 한 줄의 텍스트만 포함된 경우 추가 빈 줄이 표시되는 것을 방지하기 위해 추가 CSS 규칙이 필요합니다. :after 의사 요소에 의해 추가되었습니다.

h1 {
   text-align: justify;
   text-align-last: justify;
   height: 1em;
   line-height: 1;
}

h1:after {
   content: "";
   display: inline-block;
   width: 100%;
}

추가 리소스

이 기술에 대한 자세한 내용과 통찰력은 다음을 참조하세요.

[크로스 브라우저 CSS: 마지막 줄 단락 양쪽 맞춤 텍스트](http://kristinlbradley.wordpress.com/2011/09/15/cross-browser-css-justify-last-line-paragraph-text/)

위 내용은 여러 브라우저에서 DIV의 마지막 텍스트 줄을 정렬하려면 어떻게 해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!