크기가 고정되어있는 요소 안에서 글자 개수에 따라 폰트 크기 변하게 하기
조회수 9470회
div 요소가 있는데 이 div 요소는 크기가 고정되어 있습니다. 또한 글자가 많아서 옆으로 넘어가는건 괜찮은데 밑으로 갔을 때 짤리지 않게 하려고 합니다. 예를 들어서
width: 300px; height: 300px;
이러한 상황에서 요소에 들어가는 글자의 개수에 따른 폰트 사이즈를 알아서 변경시켜주는 법은 어떻게 할수 있을 까요?
-
(•́ ✖ •̀)
알 수 없는 사용자
1 답변
-
순수한 css로는 힘들것같고요 TextFit이라는 javascript 라이브러리를 사용해야 할것같아요. 아래의 링크를 타고 들어가서 안내대로 적용해보시면 될 겁니다.
https://github.com/strml/textfit
위 링크 들어가서 파일 다운받고, 다음과 같이 html에 테스트해보세요
<html> <head> <script src="textFit.min.js"></script> </head> <body> <div class="box" style="width:100px; height:100px; background-color: black; color:grey;"> 요소에 들어가는 글자의 개수에 따른 폰트 사이즈를 알아서 변경시켜주는 법은 어떻게 할수 있을 까요? </div> <script type="text/javascript"> textFit(document.getElementsByClassName('box')); </script> </body> </html>
- 헛 감사합니다!! 시도 해보고 잘 안되면 댓글 달아보겠습니다!! 알 수 없는 사용자 2016.7.6 16:10
- 넵. 문제가 해결되시길 :-) 박기선 2016.7.7 00:44
댓글 입력