텍스트 너비 및 높이 적응형 div를 구현하는 방법-JS 튜토리얼-php.cn

텍스트 너비 및 높이 적응형 div를 구현하는 방법

不言

풀어 주다： 2018-11-06 14:42:02

원래의

2574명이 탐색했습니다.

여기서 텍스트 너비 및 높이 적응형 div를 구현하는 방법에 대한 기사를 공유하겠습니다. 도움이 필요한 친구들이 참고할 수 있습니다.

div에 텍스트를 맞추기 위해 여러 JavaScript 스니펫과 라이브러리를 시도한 후 이들 중 어느 것도 DIV의 "높이"를 처리하지 못하고 텍스트가 오버플로될 수 있기 때문에 약간 당황스럽습니다...

그래서 저는 다음과 같은 간단한 함수를 다음과 같이 작성했습니다. 텍스트가 div를 오버플로하는지 테스트하고 맞을 때까지 크기를 줄이는 CoffeeScript입니다!

함수는 .Resig 클래스로 표시된 요소를 찾아 해당 요소의 크기만 조정합니다.

autoSizeText = ->
    elements = $(&#39;.resize&#39;)
    console.log elements    return if elements.length < 0

    for el in elements      do (el) ->

        resizeText = ->
          elNewFontSize = (parseInt($(el).css(&#39;font-size&#39;).slice(0, -2)) - 1) + &#39;px&#39;
          $(el).css(&#39;font-size&#39;, elNewFontSize)

        resizeText() while el.scrollHeight > el.offsetHeight

로그인 후 복사

이것은 JavaScript 컴파일 버전입니다:

var autoSizeText;autoSizeText = function() {
  var el, elements, _i, _len, _results;
  elements = $(&#39;.resize&#39;);
  console.log(elements);
  if (elements.length < 0) {
    return;
  }
  _results = [];
  for (_i = 0, _len = elements.length; _i < _len; _i++) {
    el = elements[_i];
    _results.push((function(el) {
      var resizeText, _results1;
      resizeText = function() {
        var elNewFontSize;
        elNewFontSize = (parseInt($(el).css(&#39;font-size&#39;).slice(0, -2)) - 1) + &#39;px&#39;;
        return $(el).css(&#39;font-size&#39;, elNewFontSize);
      };
      _results1 = [];
      while (el.scrollHeight > el.offsetHeight) {
        _results1.push(resizeText());
      }
      return _results1;
    })(el));
  }
  return _results;};

로그인 후 복사

위 내용은 텍스트 너비 및 높이 적응형 div를 구현하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!