JavaScript를 사용하여 한 줄 div에 맞게 글꼴 크기를 어떻게 조정할 수 있습니까?

JavaScript를 사용하여 한 줄에 Div에 맞게 글꼴 크기 조정

상황:

에 제목이 있는 기사가 있습니다. 태그가 있지만 제목이 길이에 관계없이 한 줄에 유지되도록 하려고 합니다.

CSS 솔루션:

다음을 허용하는 CSS 속성이 없습니다. div 너비에 따라 자동으로 텍스트 크기를 조정합니다.

JavaScript/jQuery 해결 방법:

1. 다음 스타일로 숨겨진 div를 만듭니다.

   position: absolute;
   visibility: hidden;
   white-space: nowrap;
   font-family: [same as the title's]

2. 제목 텍스트를 숨겨진 div에 복사합니다.
3. 숨겨진 div의 초기 글꼴 크기를 설정합니다.
4. 다음을 수행하는 while 루프를 구현합니다. 너비가 상위 div의 너비와 일치할 때까지 숨겨진 div의 글꼴 크기를 늘립니다.
5. 계산된 글꼴 크기를 원래 제목으로 설정합니다.

최적화:

성능을 향상시키기 위해 while 루프를 최적화하여 성능을 줄일 수 있습니다. 반복:

1. 시작 글꼴 크기를 설정합니다.
2. 테스트 div의 너비를 가져옵니다.
3. 원본 div와 테스트 div 사이의 너비 요소를 계산합니다.
4. 1씩 늘리거나 줄이는 대신 이 요소를 기준으로 글꼴 크기를 조정하세요. 단위.
5. 테스트 div의 너비를 테스트합니다.

위 내용은 JavaScript를 사용하여 한 줄 div에 맞게 글꼴 크기를 어떻게 조정할 수 있습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!