>  기사  >  웹 프론트엔드  >  텍스트 너비 및 높이 적응형 div를 구현하는 방법

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

不言
不言원래의
2018-11-06 14:42:022565검색

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

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

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

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

autoSizeText = ->
    elements = $('.resize')
    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 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.