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


div 요소가 있는데 이 div 요소는 크기가 고정되어 있습니다. 또한 글자가 많아서 옆으로 넘어가는건 괜찮은데 밑으로 갔을 때 짤리지 않게 하려고 합니다. 예를 들어서

width: 300px; height: 300px;

이러한 상황에서 요소에 들어가는 글자의 개수에 따른 폰트 사이즈를 알아서 변경시켜주는 법은 어떻게 할수 있을 까요?


조회수 227


1 답변


좋아요
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년 07월 06일에 작성됨
    Css / visual design

  • 헛 감사합니다!! 시도 해보고 잘 안되면 댓글 달아보겠습니다!!    TuTanKhamen   2016.7.6 16:10     
  • 넵. 문제가 해결되시길 :-)    los0731   2016.7.7 00:44     

로그인이 필요한 기능입니다.

Hashcode는 개발자들을 위한 무료 QnA사이트 입니다. 작성한 답변에 다른 개발자들이 댓글을 작성하거나 좋아요/싫어요를 할 수 있기 때문에 계정을 필요로 합니다.
► 로그인
► 계정만들기
Close