Javascript 文本自适应全宽度

JS adjusting lines full width

《three.js使用多个渐变torus模拟光环光晕》申请公开！

第三方库
作品简介 2231
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

(function() {
    var $mainContainer, cWidth;

$mainContainer = $(".description");

cWidth = $mainContainer.width();

$mainContainer.find("*").not("br").each(function(index, elem) {
        var $elem, cycles, direction, fontSize, found, results, step, width;
        $elem = $(elem);
        fontSize = 5;
        step = 10;
        cycles = 0;
        found = false;
        direction = 1;
        results = [];
        while (!found && cycles < 100) {
            fontSize += step;
            $elem.css({
                "font-size": fontSize + "px"
            });
            width = $elem.width();
            cycles++;
            if (cycles === 100) {
                alert("Infinite loop");
            }
            if ((width > cWidth + 3) && direction > 0) {
                direction = -1;
                step = -step / 2;
            } else if ((width < cWidth - 3) && direction < 0) {
                direction = 1;
                step = -step / 2;
            } else if ((cWidth - 3 < width && width < cWidth + 3)) {
                found = true;
            }
            results.push($elem.css({
                "line-height": fontSize + "px"
            }));
        }
        return results;
    });

}).call(this);

编译

CSS

HTML

JS adjusting lines full width

编辑器支持Emmet

快捷键

JS adjusting lines full width

使用CSS3 PerspectiveTransform实现的逼真3D地球自转动画

JavaScript 波形图和基础傅里叶变换

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：