ホームページ > 記事 > ウェブフロントエンド > テキストの幅と高さに適応する div を実装する方法
ここでは、テキストの幅と高さの適応型 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('font-size').slice(0, -2)) - 1) + 'px' $(el).css('font-size', elNewFontSize) resizeText() while el.scrollHeight > el.offsetHeight
これは JavaScript のコンパイル済みバージョンです:
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('font-size').slice(0, -2)) - 1) + 'px'; return $(el).css('font-size', elNewFontSize); }; _results1 = []; while (el.scrollHeight > el.offsetHeight) { _results1.push(resizeText()); } return _results1; })(el)); } return _results;};
以上がテキストの幅と高さに適応する div を実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。