So implementieren Sie adaptive Div. für Textbreite und -höhe

Hier möchte ich mit Ihnen einen Artikel darüber teilen, wie Sie div in Textbreite und -höhe implementieren können. Freunde in Not können sich darauf beziehen.

Nachdem ich mehrere JavaScript-Schnipsel und Bibliotheken zum Einpassen von Text in Divs ausprobiert habe, bin ich ein wenig hin- und hergerissen, da keines davon mit der „Höhe“ des DIV zurechtkommt und der Text möglicherweise überläuft.. ....

Also habe ich diese einfache Funktion in CoffeeScript geschrieben, die testet, ob der Text das Div überläuft, und seine Größe reduziert, bis er passt! Die Funktion

findet Elemente, die mit der Klasse .Resig gekennzeichnet sind, und ändert nur deren Größe.

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

Dies ist die mit JavaScript kompilierte Version:

var autoSizeText;autoSizeText = function() {
  var el, elements, _i, _len, _results;
  elements = $('.resize');
  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;};

Das obige ist der detaillierte Inhalt vonSo implementieren Sie adaptive Div. für Textbreite und -höhe. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!