CSS를 사용하여 한 줄의 텍스트 양쪽 끝을 정렬하는 예

일상적인 웹 프런트 엔드 개발에서 우리는 한 줄의 텍스트가 양쪽 끝에서 정렬되는 상황을 자주 접합니다. 정렬이 필요할 뿐만 아니라 모든 브라우저와 호환됩니다. 그렇다면 CSS는 어떻게 양쪽 끝에서 정렬을 달성합니까? ? 오늘은 CSS를 사용하여 텍스트 한 줄의 양쪽 끝을 정렬하는 예제를 자세히 소개하겠습니다!

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

모두가 위의 두 줄의 코드에 익숙합니다. 여러 줄 텍스트의 경우 기본적으로 모든 브라우저와 호환되며 양쪽 끝에서 정렬이 가능합니다. 여러 줄 텍스트에서 이 스타일은 텍스트의 마지막 단락을 처리하지 않습니다.

그래서 한 줄 중국어 텍스트의 경우

p:after{
    display:inline-block;
    content:'';
    overflow:hidden;
    width:100%;
    height:0;
}

를 패치해야 합니다. 우리는 한 줄 텍스트 끝에 내용을 추가하기 위해 이후 선택기를 사용하지만 이로 인해 p가 늘어납니다. 높이도 설정해야 합니다. 전체 코드는 다음과 같습니다.

p{
    text-align:justify;
    text-align-last:justify;
    height:24px;
}
 p:after{
    display:inline-block;
    content:'';
    overflow:hidden;
    width:100%;
    height:0;
}

이 방법은 모든 주류 브라우저와 호환되지만 적어도 사용하기 어려운 브라우저는 본 적이 없습니다. after 선택기를 지원하지 않는 브라우저의 경우 selectivize 스크립트를 사용하세요. 참조 내 다른 블로그

文 字 间 要 有 空 格，不 然 不 管 用

요약:

이 글에서는 예시를 사용하여 한 줄 글의 양쪽 끝을 정렬하는 CSS 구현을 자세히 소개합니다. 친구들이 이에 대해 더 잘 이해할 것이라고 믿습니다. 이 작업이 도움이 되기를 바랍니다. ~

관련 추천:

CSS3의 양쪽 끝 정렬을 위한 이미지 및 텍스트 코드 공유 양쪽 끝 정렬 방법에 대한 자세한 설명

위 내용은 CSS를 사용하여 한 줄의 텍스트 양쪽 끝을 정렬하는 예의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!