Div의 문자 간격을 동적으로 조정하여 고정 너비를 채울 수 있습니까?

Div 너비에 맞게 문자 간격 조정

문제:

폭이 고정된 div가 있고 div 내부의 텍스트 길이는 다양합니다. 텍스트 내용에 관계없이 항상 div를 완벽하게 채우도록 텍스트의 문자 사이 간격을 동적으로 조정할 수 있습니까?

해결책:

키 이를 달성하려면 CSS 텍스트 정렬 속성과 영리한 "해킹"을 결합하는 것입니다.

CSS 코드:

div {
  background-color: gold;
  text-align: justify;
}

span {
  background-color: red;
  width: 100%;
  height: 1em;
  display: inline-block;
}

HTML 코드:

<div>
  Lorem ipsum sit dolor
  <span></span>
</div>

설명:

"text- align: justify" 속성은 텍스트를 왼쪽 및 오른쪽 여백에 맞춰 정렬합니다. "span" 요소는 div의 너비(100%)를 늘리는 투명한 오버레이입니다. 텍스트 내용 뒤에 "span"을 배치하면 텍스트가 남은 공간을 채우게 되어 문자 사이의 간격이 조정됩니다.

위 내용은 Div의 문자 간격을 동적으로 조정하여 고정 너비를 채울 수 있습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!