Comment implémenter un div adaptatif à la largeur et à la hauteur du texte-js tutoriel-php.cn

Comment implémenter un div adaptatif à la largeur et à la hauteur du texte

不言

Libérer： 2018-11-06 14:42:02

original

2570 Les gens l'ont consulté

Ici, j'aimerais partager avec vous un article sur la façon d'implémenter un div adaptatif à la largeur et à la hauteur du texte. Les amis dans le besoin peuvent s'y référer.

Après avoir essayé plusieurs extraits de code et bibliothèques JavaScript pour insérer du texte dans des divs, je suis un peu bloqué car aucun d'entre eux ne gère la "hauteur" du DIV et le texte peut déborder.. ....

J'ai donc écrit cette fonction simple dans CoffeeScript qui teste si le texte déborde du div et réduira sa taille jusqu'à ce qu'il rentre ! La fonction

trouve les éléments marqués avec la classe .Resig et les redimensionne uniquement.

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

Copier après la connexion

Voici la version compilée 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;};

Copier après la connexion

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!