Div 내에 맞게 글꼴 크기 조정(한 줄)
이 쿼리에서 질문자는 제목의 글꼴 크기를 동적으로 조정하는 방법을 찾습니다(< ;h1>)
요소를 사용하여 길이에 관계없이 한 줄에 맞도록 합니다. 핵심 과제는 텍스트가
width.
CSS 솔루션(사용할 수 없음)
안타깝게도 CSS에는 이 효과를 얻을 수 있는 특정 속성이 부족합니다. 이 상황에서는 오버플로 속성만으로는 충분하지 않습니다.
JavaScript/jQuery 솔루션(사용 가능)
이 문제를 해결하기 위해 JavaScript/jQuery가 솔루션을 제공합니다. 핵심 개념은 특정 스타일 속성을 가진 보조 DIV를 생성하는 것입니다.
position: absolute;
visibility: hidden;
white-space: nowrap;
font-family: /* same as the title's */
로그인 후 복사
이 DIV는 제목 콘텐츠의 너비를 테스트하는 데 사용됩니다. JavaScript/jQuery 접근 방식은 다음과 같습니다.
- 제목의 내용을 보조 DIV에 복사합니다.
- 보조 DIV의 초기 글꼴 크기를 설정합니다.
- "를 입력합니다. while" 보조 DIV의 너비가 원하는 너비와 일치할 때까지 반복하는 루프입니다.
- 각 반복 내에서 특정 요소에 따라 보조 DIV의 글꼴 크기를 조정합니다.
- 루프가 종료되면 계산된 글꼴 크기를 원래 제목 요소로 설정합니다.
이 기술을 사용하면 텍스트가
내의 한 줄에 맞습니다. 제목 길이를 정확하게 제어할 필요가 없습니다. 여러 번의 반복이 포함될 수 있지만 너비 요소를 구현하여 반복 횟수를 크게 줄여 루프를 최적화할 수 있습니다.
위 내용은 Div 내의 한 줄에 맞게 글꼴 크기를 동적으로 조정하려면 어떻게 해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
