CSS를 사용하여 Div\의 너비에 맞게 텍스트 크기를 동적으로 조정하려면 어떻게 해야 합니까?

Div 너비에 동적으로 맞게 텍스트 크기 조정

텍스트 콘텐츠가 가변적이지만 div 너비는 고정으로 유지되는 시나리오에서는 텍스트를 양쪽 정렬합니다. 충분하지 않을 수도 있습니다. 완벽한 맞춤을 얻으려면 문자 간격을 조정해야 합니다.

트릭을 사용한 CSS 솔루션

이를 달성하려면 text-align:justify와 영리한 조합을 활용하세요. hack:

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>

설명:

• 텍스트를 사용하여 양쪽 정렬하도록 텍스트 정렬 설정- align:justify.
• 범위 요소를 div.
• 배경색(데모용으로 표시), 너비 100%, 높이 1em 및 인라인 블록 표시로 범위 스타일을 지정합니다.
• 범위 너비를 100%로 설정하고 투명하며 div의 남은 공간을 채우기 위해 확장되는 컨테이너 역할을 합니다.

위 내용은 CSS를 사용하여 Div의 너비에 맞게 텍스트 크기를 동적으로 조정하려면 어떻게 해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!