CSS로 양쪽 끝의 텍스트를 정렬하는 방법은 무엇입니까? 텍스트 양쪽 끝을 정렬하는 방법

이 글의 내용은 CSS로 양쪽 끝의 텍스트를 정렬하는 방법을 소개하는 것인가요? 양쪽 끝의 텍스트를 정렬하는 방법. 도움이 필요한 친구들이 참고할 수 있기를 바랍니다.

최근 프로젝트에서 다음과 같은 요구 사항에 직면했습니다. (제목 부분은 텍스트의 양에 관계없이 양쪽 끝에서 정렬되어야 함)

아래와 같이:

그 당시에는 별 생각이 없었습니다. 대신에 ' '를 직접 사용하는 것에 대해, 결국 제품 학생들은 빨리 결과를 보고 싶어하기 때문에 감히 방치할 수 없습니다! 그런데 두 번째 페이지를 보고 깜짝 놀랐습니다.

사진과 같이:

' '이 더 이상 나를 만족시킬 수 없다는 것은 당연하므로  로 가야 합니다.

다음은 여러 유형의 공간의 차이점에 대한 간략한 소개입니다.

  /*半角的不断行的空白格*/
  /*半角的空格*/
  /*全角的空格*/

페이지 효과는 있지만 나중에 검토할 때 이 작성 방법이 유연하지 않다는 것을 알았습니다(여기 내용은 고정됨), 둘째로 의미론이 충분하지 않습니다. 그래서 당연히 CSS를 통해 해결하고 싶습니다. text-align에서 가장 많이 사용할 수 있는 center 속성은 justify(양쪽 끝에 정렬됨)라는 속성도 있지만 이후에는 사용되지 않습니다. 페이지가 새로 고쳐졌습니다. 실제로 text-align: justify here는 텍스트가 두 줄 이상이어야 하고 마지막 줄이 양쪽 끝에서 정렬되지 않는 경우 단독으로 사용할 수 있습니다.

그래서 빈 태그 범위를 사용해야 합니다.

html:

 <p>职务：<span></span></p>

css:

p{
  width:200px;
  text-align: justify;
}
p span{
  display:inline-block;
  width:100%;
}

여기서 가장 완벽한 접근 방식은 빈 태그 대신 ::after 의사 요소를 사용하는 것입니다.

PS: 정보를 확인한 결과 text-align-last: justify;는 마지막 줄의 양쪽 끝을 정렬할 수 있지만 호환성이 매우 좋지 않은 것 같습니다(Safari에서는 지원하지 않습니다)

CANIUSE (https://caniuse.com/ #search=text-align-last)

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