CSS를 사용하여 텍스트가 컨테이너의 너비를 완벽하게 채우도록 하려면 어떻게 해야 합니까?

컨테이너 너비에 맞게 텍스트 늘리기

제한된 div 내에서 텍스트 미학을 향상시키는 것은 일반적인 과제입니다. 텍스트 내용이 다양할 경우 세련되고 균형 잡힌 시각적 모양을 유지하는 것이 바람직합니다. 이 기사에서는 CSS와 기발한 기술의 조합을 사용하여 이러한 원활한 통합을 달성하는 방법을 살펴봅니다.

해결책: 텍스트 정렬 정렬 및 미묘한 트릭

CSS 속성 text-align:justify는 div 내의 텍스트를 균등하게 분배하여 왼쪽 및 오른쪽 여백을 따라 정렬합니다. 그러나 표준 자리맞추기는 지정된 문자 간격을 유지합니다. 정말 꼭 맞는 핏을 위해 작은 해킹으로 100% 너비의 투명한 범위를 추가합니다.

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

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

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

이 트릭은 본질적으로 div의 나머지 너비를 채우는 "더미" 공간을 생성하여 강제로 텍스트를 확장하고 컨테이너 내에서 단단히 정렬합니다.

위 내용은 CSS를 사용하여 텍스트가 컨테이너의 너비를 완벽하게 채우도록 하려면 어떻게 해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!