jQuery 제어 텍스트 상자가 자동으로 글꼴 채우기 예제 공유를 축소합니다.

js는 텍스트 상자의 글꼴 채우기를 자동으로 줄이도록 제어합니다. 텍스트 상자의 글꼴이 텍스트 상자의 범위를 초과하면 상자의 글꼴이 자동으로 줄어들어 전체 텍스트 상자를 채웁니다. 이 글은 주로 텍스트 상자의 글꼴 채우기를 자동으로 줄이는 jQuery에 대한 관련 정보를 소개합니다. 도움이 필요한 친구들이 참고하면 도움이 될 것입니다.

Call: resetFontSize($(".title"), 50, 10, 20);//重置字体大小

wordbox: jQuery 객체
maxHeight: 상자의 최대 높이
minSize: 최소 글꼴 크기
maxSize: 최대 글꼴 크기

this.resetFontSize=function (wordbox, maxHeight, minSize, maxSize) { 
    //  var wordbox = $(".products .title"); 
    //最大高度 
    //var maxHeight = 30; 
    //初始化文字大小为最小 
    wordbox.css('font-size', minSize + "px"); 
    maxSize++; 
    wordbox.each(function () { 
      //循环修改大小直至大于最大高度 
      for (var i = minSize; i < maxSize; i++) { 
        if ($(this).height() > maxHeight) { 
          //当容器高度大于最大高度的时候，上一个尝试的值就是最佳大小。 
          $(this).css(&#39;font-size&#39;, (i - 2) + &#39;px&#39;); 
          //结束循环 
          break; 
        } else { 
          //如果小于最大高度，文字大小加1继续尝试 
          $(this).css(&#39;font-size&#39;, i + &#39;px&#39;); 
        } 
      } 
    }); 
  };

관련 권장 사항:

만드는 방법 jQuery를 사용한 클릭 드롭다운 상자 값이 텍스트 상자에 누적됩니다

클릭 드롭다운 상자의 값을 텍스트 상자에 추가하는 방법을 jQuery에서 어떻게 구현하는지 설명하는 예

JavaScript 소개 텍스트 상자에 숫자만 입력할 수 있도록 구현하는 방법

위 내용은 jQuery 제어 텍스트 상자가 자동으로 글꼴 채우기 예제 공유를 축소합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!