크기가 고정되어있는 요소 안에서 글자 개수에 따라 폰트 크기 변하게 하기

조회수 9472회

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

답변을 하려면 로그인이 필요합니다.

프로그래머스 커뮤니티는 개발자들을 위한 Q&A 서비스입니다. 로그인해야 답변을 작성하실 수 있습니다.

(ಠ_ಠ)
(ಠ‿ಠ)