ข้อความไดนามิกขนาดอัตโนมัติเพื่อเติมขนาดภาชนะคงที่

312

ฉันต้องการแสดงข้อความที่ผู้ใช้ป้อนลงใน div ขนาดคงที่ สิ่งที่ฉันต้องการคือการปรับขนาดตัวอักษรโดยอัตโนมัติเพื่อให้ข้อความเติมในกล่องให้มากที่สุด

ดังนั้น - หาก div คือ 400px x 300px ถ้ามีคนป้อน ABC แล้วมันเป็นตัวอักษรที่ใหญ่มาก หากพวกเขาป้อนย่อหน้าก็จะเป็นตัวอักษรขนาดเล็ก

ฉันอาจต้องการเริ่มต้นด้วยขนาดตัวอักษรสูงสุด - อาจเป็น 32px และในขณะที่ข้อความมีขนาดใหญ่เกินไปที่จะพอดีกับคอนเทนเนอร์ให้ย่อขนาดของตัวอักษรจนกว่าจะพอดี

jquery html css

— GeekyMonkey
แหล่งที่มา

119

อาจเป็นหนึ่งในคุณสมบัติที่น่าทึ่งที่สุดที่ควรได้รับการเพิ่มลงใน HTML5 / CSS3 โดยไม่จำเป็นต้องใช้ JS

— John Magnolia

ฉันทำการวัดบางอย่างเมื่อฉันเปลี่ยนความยาวของข้อความไดนามิกและขนาดของคอนเทนเนอร์เพื่อคำนวณขนาดตัวอักษรที่จะทำให้พอดีกับข้อความ และหลังจากทำการวิเคราะห์การถดถอยฉันได้รับฟังก์ชั่นทางคณิตศาสตร์อย่างง่ายที่จะสร้างขนาดตัวอักษรที่ดีที่สุดโดยอัตโนมัติ

— เพื่อนของ Kim

2

มันกลับกลายเป็นว่ากราฟที่ให้ขนาดตัวอักษรที่ดีที่สุดให้แก่คุณโดย f (x) = g (ตัวอักษร) * (x / 1000) ^ n โดยที่ g (x) เป็นฟังก์ชั่นง่าย ๆ n แตกต่างกันไปขึ้นอยู่กับ แบบอักษรที่คุณใช้ (แม้ว่ามันจะมีค่ามาตรฐานสำหรับแบบอักษรทั้งหมด แต่ถ้าคุณไม่ต้องการที่จะปรับแต่งมันเพื่อให้สมบูรณ์แบบ ... ) x คือขนาดในหน่วยพิกเซลของภาชนะบรรจุ

— เพื่อนของ Kim

1

หากคุณยังคงสนใจฉันสามารถเพิ่มคำตอบ โดยส่วนตัวฉันคิดว่ามันเป็นวิธีที่ดีกว่ามากในการสร้างขนาดตัวอักษรที่ถูกต้องตั้งแต่แรกแทนที่จะพยายามและล้มเหลวจนกว่าสคริปต์ "ทำให้ถูกต้อง"

— เพื่อนของ Kim

1

ตรวจสอบคำตอบของฉันเพื่อหาวิธีที่ดีกว่าในการทำเช่นนี้

— Hoffmann

167

ขอบคุณโจมตี ฉันต้องการใช้ jQuery

คุณชี้ให้ฉันในทิศทางที่ถูกต้องและนี่คือสิ่งที่ฉันลงเอยด้วย:

นี่คือลิงค์ไปยังปลั๊กอิน: https://plugins.jquery.com/textfill/
และลิงก์ไปยังแหล่งที่มา: http://jquery-textfill.github.io/

;(function($) {
    $.fn.textfill = function(options) {
        var fontSize = options.maxFontPixels;
        var ourText = $('span:visible:first', this);
        var maxHeight = $(this).height();
        var maxWidth = $(this).width();
        var textHeight;
        var textWidth;
        do {
            ourText.css('font-size', fontSize);
            textHeight = ourText.height();
            textWidth = ourText.width();
            fontSize = fontSize - 1;
        } while ((textHeight > maxHeight || textWidth > maxWidth) && fontSize > 3);
        return this;
    }
})(jQuery);

$(document).ready(function() {
    $('.jtextfill').textfill({ maxFontPixels: 36 });
});

และ html ของฉันเป็นเช่นนี้

<div class='jtextfill' style='width:100px;height:50px;'>
    <span>My Text Here</span>
</div>

นี่เป็นปลั๊กอิน jquery แรกของฉันดังนั้นจึงอาจไม่ดีเท่าที่ควร พอยน์เตอร์ยินดีต้อนรับอย่างแน่นอน

— GeekyMonkey
แหล่งที่มา

8

จริง ๆ แล้วฉันเพิ่งล้างมันและจัดเก็บเป็นปลั๊กอินพร้อมใช้งานจาก jquery.com ที่plugins.jquery.com/project/TextFill

— GeekyMonkey

3

@GeekyMonkey คุณดึงปลั๊กอินหรือไม่ เพียงแค่ตามลิงค์ล่อไปยังหน้านี้และคิดว่าฉันได้ดู แต่การเชื่อมโยง jQuery.com 404เพื่อกลับไปยังเว็บไซต์ของคุณ

— เดวิดบอกว่าคืนสถานะโมนิก้า

หมายเหตุ: ฉันพบว่าด้วยเหตุผลบางอย่างปลั๊กอินนี้ใช้งานได้เฉพาะเมื่อ div ($ ('. jtextfill') ในตัวอย่างด้านบน) เป็นส่วนหนึ่งของเอกสารรูท ดูเหมือนว่า. width () จะคืนค่าศูนย์เมื่อ div ถูกฝังไว้ใน div อื่น

— Jayesh

1

บรรทัด "while" บนลูปนั้นดูผิดสำหรับฉัน - ควรมีวงเล็บล้อมรอบ "||" subexpression วิธีที่เขียนตอนนี้ขนาดตัวอักษรขั้นต่ำจะถูกตรวจสอบเฉพาะเมื่อความกว้างมีขนาดใหญ่เกินไปไม่ใช่ความสูง

— Pointy

4

วิธีนี้ช้ามากทุกครั้งที่ขนาดตัวอักษรเปลี่ยนขนาดต้องใช้องค์ประกอบที่จะแสดงผลอีกครั้ง ตรวจสอบคำตอบของฉันสำหรับวิธีที่ดีกว่าในการทำเช่นนี้

— Hoffmann

52

ฉันไม่พบวิธีแก้ไขปัญหาก่อนหน้าใดที่เพียงพอเพียงพอเนื่องจากประสิทธิภาพไม่ดีดังนั้นฉันจึงสร้างตัวเองที่ใช้คณิตศาสตร์อย่างง่ายแทนที่จะวนซ้ำ ควรทำงานได้ดีในเบราว์เซอร์ทั้งหมดเช่นกัน

จากกรณีทดสอบประสิทธิภาพนี้เร็วกว่าโซลูชันอื่น ๆ ที่พบที่นี่

(function($) {
    $.fn.textfill = function(maxFontSize) {
        maxFontSize = parseInt(maxFontSize, 10);
        return this.each(function(){
            var ourText = $("span", this),
                parent = ourText.parent(),
                maxHeight = parent.height(),
                maxWidth = parent.width(),
                fontSize = parseInt(ourText.css("fontSize"), 10),
                multiplier = maxWidth/ourText.width(),
                newSize = (fontSize*(multiplier-0.1));
            ourText.css(
                "fontSize", 
                (maxFontSize > 0 && newSize > maxFontSize) ? 
                    maxFontSize : 
                    newSize
            );
        });
    };
})(jQuery);

หากคุณต้องการมีส่วนร่วมฉันได้เพิ่มนี้เพื่อสรุปสาระสำคัญ

— mekwall
แหล่งที่มา

1

@ จอนขอบคุณ! คุณพูดถูกว่าสคริปต์ของฉันไม่ได้ทำหลายบรรทัด แต่จากนั้น OP ไม่ได้ถามเฉพาะเพื่อให้สมมติฐานของคุณผิด นอกจากนี้พฤติกรรมแบบนั้นก็ไม่สมเหตุสมผลนัก ฉันเดาวิธีที่ดีที่สุดในการเพิ่มการรองรับหลายบรรทัดคือการแบ่งสตริงตามจำนวนคำแล้วคำนวณแต่ละส่วนด้วยสคริปต์ด้านบนและมันน่าจะเร็วกว่าอยู่ดี

— mekwall

4

@ จอนฉันเล่นรอบเล็ก ๆ ด้วยข้อความหลายบรรทัดและจบลงด้วยการแก้ปัญหานี้ วิธีพายุทรายมีแนวโน้มมากขึ้นที่ถูกต้องที่สุด แต่คนนี้ได้เร็วขึ้น;)

— mekwall

2

นี่คือรุ่นที่มีขนาดตัวอักษรต่ำ

— Jess Telford

1

@Hoffmann อืม โซลูชันของฉันไม่ได้โทร.css("font-size")เป็นลูป คุณได้สิ่งนั้นมาจากไหน โซลูชันของฉันน่าจะเร็วกว่าเนื่องจากไม่มีสิ่งแปลกใหม่ใด ๆ ที่คุณเพิ่มลงในปลั๊กอิน คุณยินดีที่จะเพิ่มปลั๊กอินของคุณใน jsperf และเราจะดูว่าปลั๊กอินตัวใดเร็วที่สุด

— mekwall

1

@ MarcusEkwall โอ้ขอโทษด้วยเหตุผลบางอย่างที่ฉันถึงแม้ว่าฉันเห็นห่วงในขณะนั้น วิธีการของคุณคล้ายกับของฉันและแน่นอนฉันจะช้าลงเล็กน้อยเนื่องจากปลั๊กอินของฉันยังทำสิ่งอื่น ๆ (เช่นการปรับให้พอดีกับความสูงและความกว้างรวมข้อความไว้ที่ส่วนกลางและตัวเลือกอื่น ๆ ) ไม่ใช่เรื่องสำคัญส่วนที่ช้าจริงๆ กำลังเรียกใช้ฟังก์ชัน. css ภายในลูป

— Hoffmann

35

เท่าที่ฉันรัก upvotes เป็นครั้งคราวที่ฉันได้รับสำหรับคำตอบนี้ (ขอบคุณ!) นี่ไม่ใช่วิธีที่ดีที่สุดในการแก้ไขปัญหานี้ โปรดตรวจสอบคำตอบที่ยอดเยี่ยมอื่น ๆ ที่นี่โดยเฉพาะคำตอบที่พบวิธีแก้ปัญหาโดยไม่ต้องวนซ้ำ

ยังเพื่อประโยชน์ของการอ้างอิงต่อไปนี้เป็นคำตอบเดิมของฉัน:

<html>
<head>
<style type="text/css">
    #dynamicDiv
    {
    background: #CCCCCC;
    width: 300px;
    height: 100px;
    font-size: 64px;
    overflow: hidden;
    }
</style>

<script type="text/javascript">
    function shrink()
    {
        var textSpan = document.getElementById("dynamicSpan");
        var textDiv = document.getElementById("dynamicDiv");

        textSpan.style.fontSize = 64;

        while(textSpan.offsetHeight > textDiv.offsetHeight)
        {
            textSpan.style.fontSize = parseInt(textSpan.style.fontSize) - 1;
        }
    }
</script>

</head>
<body onload="shrink()">
    <div id="dynamicDiv"><span id="dynamicSpan">DYNAMIC FONT</span></div>
</body>
</html>

และนี่คือเวอร์ชันที่มีคลาส :

<html>
<head>
<style type="text/css">
.dynamicDiv
{
    background: #CCCCCC;
    width: 300px;
    height: 100px;
    font-size: 64px;
    overflow: hidden;
}
</style>

<script type="text/javascript">
    function shrink()
    {
        var textDivs = document.getElementsByClassName("dynamicDiv");
        var textDivsLength = textDivs.length;

        // Loop through all of the dynamic divs on the page
        for(var i=0; i<textDivsLength; i++) {

            var textDiv = textDivs[i];

            // Loop through all of the dynamic spans within the div
            var textSpan = textDiv.getElementsByClassName("dynamicSpan")[0];

            // Use the same looping logic as before
            textSpan.style.fontSize = 64;

            while(textSpan.offsetHeight > textDiv.offsetHeight)
            {
                textSpan.style.fontSize = parseInt(textSpan.style.fontSize) - 1;
            }

        }

    }
</script>

</head>
<body onload="shrink()">
    <div class="dynamicDiv"><span class="dynamicSpan">DYNAMIC FONT</span></div>
    <div class="dynamicDiv"><span class="dynamicSpan">ANOTHER DYNAMIC FONT</span></div>
    <div class="dynamicDiv"><span class="dynamicSpan">AND YET ANOTHER DYNAMIC FONT</span></div>
</body>
</html>

— โจมตี
แหล่งที่มา

3

ฉันพบว่าสิ่งนี้ทำงานได้ดีขึ้นด้วยoffsetWidthฉันต้องสร้างตัวแปรสำหรับขนาดแล้วผนวก pxtextSpan.style.fontSize = size+"px";

— Wez

2

แน่ใจว่าจำเป็นต้องใช้ '+ "px"'

— sandun dhammika

@IdanShechter ขออภัยที่ต้องรอนานรอนาน! เพิ่มตัวอย่าง!

— โจมตี

ขอบคุณช่วยชีวิต! ฉันไม่ทราบ jQuery ดังนั้นฉันติดกับวิธีแก้ปัญหาของคุณ :)

— 23414

32

คำตอบอื่น ๆ ส่วนใหญ่ใช้การวนซ้ำเพื่อลดขนาดแบบอักษรจนกว่าจะเหมาะกับ div นี่เป็นช้ามากเนื่องจากหน้าจำเป็นต้องแสดงองค์ประกอบอีกครั้งทุกครั้งที่ขนาดตัวอักษรเปลี่ยนขนาด ในที่สุดฉันก็ต้องเขียนอัลกอริทึมของตัวเองเพื่อให้มันทำงานในลักษณะที่อนุญาตให้ฉันอัปเดตเนื้อหาเป็นระยะโดยไม่ต้องแช่แข็งเบราว์เซอร์ผู้ใช้ ฉันได้เพิ่มฟังก์ชั่นอื่น ๆ (ข้อความหมุนเพิ่มการขยาย) และบรรจุเป็นปลั๊กอิน jQuery คุณสามารถรับได้ที่:

https://github.com/DanielHoffmann/jquery-bigtext

เพียงแค่โทร

$("#text").bigText();

และมันจะพอดีกับภาชนะของคุณ

ดูการทำงานที่นี่:

http://danielhoffmann.github.io/jquery-bigtext/

สำหรับตอนนี้มีข้อ จำกัด บางอย่าง div ต้องมีความสูงและความกว้างคงที่และไม่สนับสนุนการตัดข้อความเป็นหลายบรรทัด

ฉันจะพยายามหาตัวเลือกเพื่อกำหนดขนาดตัวอักษรสูงสุด

แก้ไข: ฉันพบปัญหาเพิ่มเติมกับปลั๊กอินแล้วมันไม่ได้จัดการกับโมเดลกล่องอื่นนอกเหนือจากมาตรฐานและ div ไม่สามารถมีระยะขอบหรือเส้นขอบได้ ฉันจะทำงานกับมัน

แก้ไข 2: ตอนนี้ฉันได้แก้ไขปัญหาและข้อ จำกัด แล้วและเพิ่มตัวเลือกเพิ่มเติม คุณสามารถกำหนดขนาดตัวอักษรสูงสุดและคุณสามารถเลือกที่จะ จำกัด ขนาดตัวอักษรโดยใช้ความกว้างความสูงหรือทั้งสองอย่าง ฉันจะทำงานเพื่อยอมรับค่าความกว้างสูงสุดและความสูงสูงสุดในองค์ประกอบตัวหุ้ม

แก้ไข 3: ฉันได้อัปเดตปลั๊กอินเป็นเวอร์ชัน 1.2.0 แล้ว การล้างข้อมูลที่สำคัญเกี่ยวกับรหัสและตัวเลือกใหม่ (verticalAlign, horizontalAlign, textAlign) และการสนับสนุนองค์ประกอบด้านในภายในแท็ก span (เช่นการแบ่งบรรทัดหรือไอคอนตัวอักษรสุดยอด)

— Hoffmann
แหล่งที่มา

1

ฉันสงสัยว่าทำไมไม่สนับสนุนการตัดข้อความในหลายบรรทัด?

— Manish Sapariya

1

@ManishSapariya ได้รับการสนับสนุน แต่คุณต้องเพิ่มตัวแบ่งบรรทัด (แท็ก br) ด้วยตนเอง เหตุผลที่ฉันไม่สนับสนุนการห่อข้อความอัตโนมัติก็เพราะว่าการทำให้มันเร็ว (เพียงเปลี่ยนขนาดตัวอักษรสองเท่าแทนที่จะเป็นหลาย ๆ ครั้ง) ฉันจำเป็นต้องตั้งสมมติฐานว่าข้อความจะไม่พันคำ วิธีการทำงานของปลั๊กอินของฉันคือการตั้งค่าขนาดตัวอักษรเป็น 1,000px จากนั้นดูปัจจัยของขนาดที่ข้อความถูกเปรียบเทียบกับคอนเทนเนอร์จากนั้นฉันลดขนาดแบบอักษรลงด้วยปัจจัยเดียวกัน เพื่อรองรับการตัดข้อความปกติฉันจะต้องใช้วิธีการช้า (ลดขนาดตัวอักษรหลายครั้ง) ซึ่งช้ามาก

— Hoffmann

เฮ้! เนื่องจากไม่มีการส่งข้อความส่วนตัวที่นี่ใน StackOverflow ฉันจะต้องถามคุณโดยแสดงความคิดเห็นในคำตอบ ฉันรักปลั๊กอิน jQuery ของคุณ แต่ฉันไม่สามารถใช้งานได้สำหรับฉัน ฉันรวมไลบรารี jQuery ที่ถูกต้องดาวน์โหลดปลั๊กอินของคุณและรวมไว้แล้ว ตอนนี้เมื่อฉันลองใช้มันคอนโซลบอกว่า 'Uncaught TypeError: undefined ไม่ใช่ฟังก์ชั่น' เป็นสิ่งที่คุณคุ้นเคยหรือไม่ คุณรู้วิธีแก้ไขปัญหานี้หรือไม่? ขอบคุณ

— Gust van de Wal

@GustvandeWal คุณต้องรวมปลั๊กอินหลังจากรวมไลบรารี jquery

— Hoffmann

ฉันทำ. ฉันมี <script type = "text / javascript" src = " code.jquery.com/jquery-2.1.1.min.js"></… src" js / jquery-bigtext.js "> </ script > เบราว์เซอร์ไม่แจ้งให้ฉันทราบว่าไม่สามารถโหลดไลบรารี jQuery หรือปลั๊กอิน

— Gust van de Wal

9

สิ่งนี้ขึ้นอยู่กับสิ่งที่ GeekyMonkey โพสต์ไว้ด้านบนพร้อมการแก้ไขบางอย่าง

; (function($) {
/**
* Resize inner element to fit the outer element
* @author Some modifications by Sandstrom
* @author Code based on earlier works by Russ Painter (WebDesign@GeekyMonkey.com)
* @version 0.2
*/
$.fn.textfill = function(options) {

    options = jQuery.extend({
        maxFontSize: null,
        minFontSize: 8,
        step: 1
    }, options);

    return this.each(function() {

        var innerElements = $(this).children(':visible'),
            fontSize = options.maxFontSize || innerElements.css("font-size"), // use current font-size by default
            maxHeight = $(this).height(),
            maxWidth = $(this).width(),
            innerHeight,
            innerWidth;

        do {

            innerElements.css('font-size', fontSize);

            // use the combined height of all children, eg. multiple <p> elements.
            innerHeight = $.map(innerElements, function(e) {
                return $(e).outerHeight();
            }).reduce(function(p, c) {
                return p + c;
            }, 0);

            innerWidth = innerElements.outerWidth(); // assumes that all inner elements have the same width
            fontSize = fontSize - options.step;

        } while ((innerHeight > maxHeight || innerWidth > maxWidth) && fontSize > options.minFontSize);

    });

};

})(jQuery);

— Sandstrom
แหล่งที่มา

ความแตกต่างคือมันสามารถใช้องค์ประกอบของเด็กหลายคนและมันใช้เวลาในการแพ็ดดิ้ง ใช้ขนาดแบบอักษรเป็นขนาดสูงสุดเริ่มต้นเพื่อหลีกเลี่ยงการผสม javascript และ css

— sandstrom

5

มันยอดเยี่ยม แต่ฉันจะใช้มันได้อย่างไร ฉันทำ $ ('. outer'). textfill (); และฉันก็ไม่เปลี่ยนแปลง

— Drew Baker

3

ขอบคุณนี่เป็นการใช้งานที่ดีมาก สิ่งหนึ่งที่ฉันพบเจอ: ถ้าคุณจัดการกับสตริงข้อความที่ยาวมากและตู้คอนเทนเนอร์แคบมากสตริงข้อความจะโผล่ออกมาจากตู้คอนเทนเนอร์ แต่ outerWidth จะยังคงคำนวณราวกับว่ามันไม่ โยน "ตัดคำ: แบ่งคำ;" ลงใน CSS ของคุณสำหรับคอนเทนเนอร์นั้นมันจะแก้ไขปัญหานี้

— Jon

8

ต่อไปนี้เป็นวิธีการวนซ้ำที่ได้รับการปรับปรุงซึ่งใช้การค้นหาแบบไบนารีเพื่อค้นหาขนาดที่ใหญ่ที่สุดที่เป็นไปได้ที่เหมาะกับผู้ปกครองในขั้นตอนที่น้อยที่สุด (ซึ่งเร็วกว่าและแม่นยำกว่าการก้าวด้วยขนาดตัวอักษรคงที่) รหัสนี้ยังได้รับการปรับปรุงในหลายวิธีเพื่อประสิทธิภาพ

ตามค่าเริ่มต้นจะมีการดำเนินการ 10 ขั้นตอนการค้นหาแบบไบนารีซึ่งจะได้รับภายใน 0.1% ของขนาดที่เหมาะสม คุณสามารถตั้งค่า numIter เป็นค่า N เพื่อรับภายใน 1/2 ^ N ของขนาดที่เหมาะสม

เรียกว่าด้วยตัวเลือก CSS เช่น: fitToParent('.title-span');

/**
 * Fit all elements matching a given CSS selector to their parent elements'
 * width and height, by adjusting the font-size attribute to be as large as
 * possible. Uses binary search.
 */
var fitToParent = function(selector) {
    var numIter = 10;  // Number of binary search iterations
    var regexp = /\d+(\.\d+)?/;
    var fontSize = function(elem) {
        var match = elem.css('font-size').match(regexp);
        var size = match == null ? 16 : parseFloat(match[0]);
        return isNaN(size) ? 16 : size;
    }
    $(selector).each(function() {
        var elem = $(this);
        var parentWidth = elem.parent().width();
        var parentHeight = elem.parent().height();
        if (elem.width() > parentWidth || elem.height() > parentHeight) {
            var maxSize = fontSize(elem), minSize = 0.1;
            for (var i = 0; i < numIter; i++) {
                var currSize = (minSize + maxSize) / 2;
                elem.css('font-size', currSize);
                if (elem.width() > parentWidth || elem.height() > parentHeight) {
                    maxSize = currSize;
                } else {
                    minSize = currSize;
                }
            }
            elem.css('font-size', minSize);
        }
    });
};

— ลุคฮัทชิสัน
แหล่งที่มา

รักตัวเลือกนี้ ผมปรับเปลี่ยนเพื่อเพิ่มพารามิเตอร์สำหรับการและ vAlign ตั้งค่าความสูงบรรทัดขององค์ประกอบที่เลือกเป็นความสูงของผู้ปกครอง Padding ลดขนาดสุดท้ายด้วยค่าที่ส่งผ่าน มันเริ่มต้นที่ 5 ฉันคิดว่ามันดูดีจริงๆ paddingvAlign == true

— ผู้ให้การสนับสนุนของปีศาจ

6

ฉันได้สร้างคำสั่งสำหรับ AngularJS - แรงบันดาลใจอย่างหนักจากคำตอบของ GeekyMonkey แต่ไม่มีการพึ่งพา jQuery

สาธิต: http://plnkr.co/edit/8tPCZIjvO3VSApSeTtYr?p=preview

มาร์กอัป

<div class="fittext" max-font-size="50" text="Your text goes here..."></div>

คำสั่ง

app.directive('fittext', function() {

  return {
    scope: {
      minFontSize: '@',
      maxFontSize: '@',
      text: '='
    },
    restrict: 'C',
    transclude: true,
    template: '<div ng-transclude class="textContainer" ng-bind="text"></div>',
    controller: function($scope, $element, $attrs) {
      var fontSize = $scope.maxFontSize || 50;
      var minFontSize = $scope.minFontSize || 8;

      // text container
      var textContainer = $element[0].querySelector('.textContainer');

      angular.element(textContainer).css('word-wrap', 'break-word');

      // max dimensions for text container
      var maxHeight = $element[0].offsetHeight;
      var maxWidth = $element[0].offsetWidth;

      var textContainerHeight;
      var textContainerWidth;      

      var resizeText = function(){
        do {
          // set new font size and determine resulting dimensions
          textContainer.style.fontSize = fontSize + 'px';
          textContainerHeight = textContainer.offsetHeight;
          textContainerWidth = textContainer.offsetWidth;

          // shrink font size
          var ratioHeight = Math.floor(textContainerHeight / maxHeight);
          var ratioWidth = Math.floor(textContainerWidth / maxWidth);
          var shrinkFactor = ratioHeight > ratioWidth ? ratioHeight : ratioWidth;
          fontSize -= shrinkFactor;

        } while ((textContainerHeight > maxHeight || textContainerWidth > maxWidth) && fontSize > minFontSize);        
      };

      // watch for changes to text
      $scope.$watch('text', function(newText, oldText){
        if(newText === undefined) return;

        // text was deleted
        if(oldText !== undefined && newText.length < oldText.length){
          fontSize = $scope.maxFontSize;
        }
        resizeText();
      });
    }
  };
});

— sqren
แหล่งที่มา

ปัญหาหนึ่งที่ฉันมีกับเรื่องนี้ก็คือresizeTextดูเหมือนว่าจะได้รับการเรียกก่อนที่ng-bindจริงจะกำหนดข้อความให้กับองค์ประกอบผลในการปรับขนาดขึ้นอยู่กับข้อความก่อนหน้ามากกว่าข้อความปัจจุบัน สิ่งนี้ไม่ได้เลวร้ายเกินไปในการสาธิตด้านบนซึ่งมันถูกเรียกซ้ำ ๆ ในขณะที่ผู้ใช้พิมพ์ แต่ถ้ามันถูกเรียกครั้งหนึ่งจากโมฆะไปจนถึงมูลค่าที่แท้จริง

— Miral

5

ฉันแยกสคริปต์ด้านบนจาก Marcus Ekwall: https://gist.github.com/3945316และปรับแต่งมันตามความชอบของฉันตอนนี้มันจะเริ่มทำงานเมื่อปรับขนาดหน้าต่างเพื่อให้เด็กเข้ากับที่เก็บของเสมอ ฉันวางสคริปต์ด้านล่างเพื่ออ้างอิง

(function($) {
    $.fn.textfill = function(maxFontSize) {
        maxFontSize = parseInt(maxFontSize, 10);
        return this.each(function(){
            var ourText = $("span", this);
            function resizefont(){
                var parent = ourText.parent(),
                maxHeight = parent.height(),
                maxWidth = parent.width(),
                fontSize = parseInt(ourText.css("fontSize"), 10),
                multiplier = maxWidth/ourText.width(),
                newSize = (fontSize*(multiplier));
                ourText.css("fontSize", maxFontSize > 0 && newSize > maxFontSize ? maxFontSize : newSize );
            }
            $(window).resize(function(){
                resizefont();
            });
            resizefont();
        });
    };
})(jQuery);

— นิม
แหล่งที่มา

2

เป็นเรื่องดีที่คุณพยายามช่วยเหลือผู้ถาม อย่างไรก็ตามการทิ้งคำตอบด้วยลิงก์เพียงอย่างเดียวอาจเป็นอันตรายได้ในบางกรณี ในขณะที่คำตอบของคุณดีในขณะนี้หากลิงก์เคยตายคำตอบของคุณจะสูญเสียคุณค่า ดังนั้นจะเป็นประโยชน์หากคุณสรุปเนื้อหาจากบทความในคำตอบของคุณ ดูคำถามนี้เพื่อความกระจ่าง

— Cody Guldner

5

นี่คือการแก้ไขคำตอบของ OP ของฉัน

ในระยะสั้นหลายคนที่พยายามปรับให้เหมาะสมนี้บ่นว่ามีการใช้วง ใช่แม้ว่าลูปอาจช้า แต่วิธีการอื่นอาจไม่ถูกต้อง

ดังนั้นวิธีการของฉันใช้การค้นหาแบบไบนารี่เพื่อหาขนาดตัวอักษรที่ดีที่สุด:

$.fn.textfill = function()
{
    var self = $(this);
    var parent = self.parent();

    var attr = self.attr('max-font-size');
    var maxFontSize = parseInt(attr, 10);
    var unit = attr.replace(maxFontSize, "");

    var minFontSize = parseInt(self.attr('min-font-size').replace(unit, ""));
    var fontSize = (maxFontSize + minFontSize) / 2;

    var maxHeight = parent.height();
    var maxWidth = parent.width();

    var textHeight;
    var textWidth;

    do
    {
        self.css('font-size', fontSize + unit);

        textHeight = self.height();
        textWidth = self.width();

        if(textHeight > maxHeight || textWidth > maxWidth)
        {
            maxFontSize = fontSize;
            fontSize = Math.floor((fontSize + minFontSize) / 2);
        }
        else if(textHeight < maxHeight || textWidth < maxWidth)
        {
            minFontSize = fontSize;
            fontSize = Math.floor((fontSize + maxFontSize) / 2);
        }
        else
            break;

    }
    while(maxFontSize - minFontSize > 1 && maxFontSize > minFontSize);

    self.css('font-size', fontSize + unit);

    return this;
}

function resizeText()
{
  $(".textfill").textfill();
}

$(document).ready(resizeText);
$(window).resize(resizeText);

นอกจากนี้ยังอนุญาตให้องค์ประกอบระบุแบบอักษรขั้นต่ำและสูงสุด:

<div class="container">
    <div class="textfill" min-font-size="10px" max-font-size="72px">
        Text that will fill the container, to the best of its abilities, and it will <i>never</i> have overflow.
    </div>
</div>

นอกจากนี้อัลกอริทึมนี้ไม่มีหน่วย คุณอาจจะระบุem, rem, %ฯลฯ และมันจะใช้ว่าสำหรับผลสุดท้าย

นี่คือ Fiddle: https://jsfiddle.net/fkhqhnqe/1/

— ความเจริญ
แหล่งที่มา

2

ฉันมีปัญหาเดียวกันกับเว็บไซต์ของฉัน ฉันมีหน้าที่แสดงบนโปรเจ็กเตอร์บนกำแพงหน้าจอขนาดใหญ่ ..

เนื่องจากฉันไม่ทราบขนาดสูงสุดของแบบอักษรของฉันฉันจึงใช้ปลั๊กอินด้านบนของ @GeekMonkey อีกครั้ง แต่การเพิ่มขนาดตัวอักษร:

$.fn.textfill = function(options) {
        var defaults = { innerTag: 'span', padding: '10' };
        var Opts = jQuery.extend(defaults, options);

        return this.each(function() {
            var ourText = $(Opts.innerTag + ':visible:first', this);
            var fontSize = parseFloat(ourText.css('font-size'),10);
            var doNotTrepass = $(this).height()-2*Opts.padding ;
            var textHeight;

            do {
                ourText.css('font-size', fontSize);
                textHeight = ourText.height();
                fontSize = fontSize + 2;
            } while (textHeight < doNotTrepass );
        });
    };

— guillaumepotier
แหล่งที่มา

+1 สำหรับการเป็นปลั๊กอินเดียวในหน้านี้ที่ใช้งานได้จริงสำหรับฉัน!

— skybondsor

2

ปลั๊กอินนี้ขัดข้องหน้าสำหรับฉัน

— Jezen Thomas

1

นี่คือเวอร์ชันของคำตอบที่ยอมรับซึ่งสามารถใช้พารามิเตอร์ minFontSize ได้

(function($) {
    /**
    * Resizes an inner element's font so that the inner element completely fills the outer element.
    * @author Russ Painter WebDesign@GeekyMonkey.com
    * @author Blake Robertson 
    * @version 0.2 -- Modified it so a min font parameter can be specified.
    *    
    * @param {Object} Options which are maxFontPixels (default=40), innerTag (default='span')
    * @return All outer elements processed
    * @example <div class='mybigdiv filltext'><span>My Text To Resize</span></div>
    */
    $.fn.textfill = function(options) {
        var defaults = {
            maxFontPixels: 40,
            minFontPixels: 10,
            innerTag: 'span'
        };
        var Opts = jQuery.extend(defaults, options);
        return this.each(function() {
            var fontSize = Opts.maxFontPixels;
            var ourText = $(Opts.innerTag + ':visible:first', this);
            var maxHeight = $(this).height();
            var maxWidth = $(this).width();
            var textHeight;
            var textWidth;
            do {
                ourText.css('font-size', fontSize);
                textHeight = ourText.height();
                textWidth = ourText.width();
                fontSize = fontSize - 1;
            } while ((textHeight > maxHeight || textWidth > maxWidth) && fontSize > Opts.minFontPixels);
        });
    };
})(jQuery);

— blak3r
แหล่งที่มา

ขอบคุณแม้ว่าฉันคิดว่าคุณมีเซมิโคลอนอยู่ด้านบนสุดของรหัสที่ไม่ควรอยู่

— Patrick Moore

1

คุณสามารถใช้FitText.js ( หน้า github ) เพื่อแก้ปัญหานี้ มีขนาดเล็กและมีประสิทธิภาพจริงๆเมื่อเทียบกับ TextFill TextFill ใช้แพงในขณะที่วนและ FitText ไม่

นอกจากนี้ FitText นั้นมีความยืดหยุ่นมากกว่า (ฉันใช้มันในแบบ proyect ที่มีความต้องการพิเศษมากและทำงานเหมือนแชมป์!)

HTML:

<div class="container">
  <h1 id="responsive_headline">Your fancy title</h1>
</div>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="jquery.fittext.js"></script>
<script>
  jQuery("#responsive_headline").fitText();
</script>

นอกจากนี้คุณยังสามารถตั้งค่าตัวเลือกได้:

<script>
  jQuery("#responsive_headline").fitText(1, { minFontSize: '30px', maxFontSize: '90px'});
</script>

CSS:

#responsive_headline {
   width: 100%;
   display: block;
}

และถ้าคุณต้องการมัน FitText นอกจากนี้ยังมีรุ่นที่ไม่มี jQuery

— eduludi
แหล่งที่มา

fittext คำนึงถึงส่วนสูงหรือไม่?

— Manish Sapariya

1

@ManishSapariya ไม่หรอก มันเพียงแค่แบ่งความกว้างของภาชนะโดย 10 และใช้มันเป็นขนาดตัวอักษร

— Dan H

1

แก้ไข: รหัสนี้ใช้เพื่อแสดงบันทึกที่ด้านบนของวิดีโอ HTML5 มันเปลี่ยนขนาดตัวอักษรได้ทันทีเมื่อปรับขนาดวิดีโอ (เมื่อปรับขนาดหน้าต่างเบราว์เซอร์) บันทึกย่อนั้นเชื่อมต่อกับวิดีโอ (เช่นเดียวกับโน้ตบน YouTube) ซึ่งเป็นสาเหตุที่รหัสใช้อินสแตนซ์แทนที่จะเป็น DOM โดยตรง.

ตามคำขอฉันจะโยนรหัสที่ฉันใช้เพื่อให้บรรลุนี้ (กล่องข้อความในวิดีโอ HTML5) โค้ดถูกเขียนเมื่อนานมาแล้วและฉันค่อนข้างคิดว่ามันค่อนข้างยุ่ง เนื่องจากคำถามได้รับการตอบแล้วและคำตอบนั้นได้รับการยอมรับมานานแล้วฉันไม่รำคาญที่จะเขียนใหม่ แต่ถ้าใครต้องการทำให้มันง่ายขึ้นหน่อยคุณก็ยินดีมากกว่า!

// Figure out the text size:
var text = val['text'];
var letters = text.length;
var findMultiplier = function(x) { // g(x)
    /* By analysing some functions with regression, the resulting function that
     gives the best font size with respect to the number of letters and the size
     of the note is:
     g(x) = 8.3 - 2.75x^0.15 [1 < x < 255]
     f(x) = g(letters) * (x / 1000)^0.5
     Font size = f(size)
     */
    return 8.3 - 2.75 * Math.pow(x, 0.15);
};

var findFontSize = function(x) { // f(x)
    return findMultiplier(letters) * Math.pow(x / 1000, 0.5);
};

val.setFontSizeListener = function() {
    p.style.fontSize = '1px'; // So the text should not overflow the box when measuring.
    var noteStyle = window.getComputedStyle(table);
    var width = noteStyle.getPropertyValue('width');
    var height = noteStyle.getPropertyValue('height');
    var size = width.substring(0, width.length - 2) * height.substring(0, height.length - 2);
    p.style.fontSize = findFontSize(size) + 'px';
};
window.addEventListener('resize', val.setFontSizeListener);

คุณอาจต้องปรับแต่งตัวเลขเหล่านี้ตั้งแต่แบบอักษรถึงแบบอักษรและแบบอักษร วิธีที่ดีในการทำเช่นนี้คือดาวน์โหลดตัวสร้างกราฟอิสระที่เรียกว่า GeoGebra เปลี่ยนความยาวของข้อความและขนาดของกล่อง จากนั้นคุณกำหนดขนาดด้วยตนเอง เขียนผลลัพธ์ด้วยตนเองลงในระบบพิกัด จากนั้นคุณป้อนสมการทั้งสองที่ฉันโพสต์ไว้ที่นี่และคุณปรับแต่งตัวเลขจนกระทั่งกราฟ "ของฉัน" ตรงกับจุดที่คุณกำหนดเอง

— เพื่อนของคิม
แหล่งที่มา

1

โซลูชั่นซ้ำที่นำเสนอสามารถเร่งความเร็วได้อย่างรวดเร็วในสองมุมมอง:

1) คูณขนาดตัวอักษรด้วยค่าคงที่บางส่วนแทนที่จะเพิ่มหรือลบ 1

2) อันดับแรกให้ใช้ค่าคงที่ของสนามเป็นศูนย์โดยบอกให้เพิ่มขนาดเป็นสองเท่าของแต่ละลูป จากนั้นด้วยความคิดคร่าวๆว่าจะเริ่มต้นอย่างไรให้ทำสิ่งเดียวกันกับการปรับที่ละเอียดกว่านั้นพูดคูณด้วย 1.1 ในขณะที่ผู้ชอบความสมบูรณ์แบบอาจต้องการขนาดพิกเซลจำนวนเต็มแน่นอนของแบบอักษรในอุดมคติผู้สังเกตการณ์ส่วนใหญ่ไม่สังเกตเห็นความแตกต่างระหว่าง 100 และ 110 พิกเซล หากคุณเป็นพวกชอบความสมบูรณ์แบบให้ทำซ้ำเป็นครั้งที่สามด้วยการปรับที่ละเอียดกว่า

แทนที่จะเขียนรูทีนที่เฉพาะเจาะจงหรือปลั๊กอินที่ตอบคำถามที่แน่นอนฉันเพียงแค่อาศัยความคิดพื้นฐานและเขียนรูปแบบของรหัสเพื่อจัดการกับปัญหาการจัดวางทุกประเภทไม่ใช่เฉพาะข้อความรวมถึง divs ที่เหมาะสมช่วงภาพ .. โดยความกว้างความสูงพื้นที่ ... ภายในคอนเทนเนอร์จับคู่องค์ประกอบอื่น ....

นี่คือตัวอย่าง:

  var                           nWindowH_px             = jQuery(window).height();
  var                           nWas                    = 0;
  var                           nTry                    = 5;

  do{
   nWas = nTry;
   nTry *= 2;
   jQuery('#divTitle').css('font-size' ,nTry +'px');
  }while( jQuery('#divTitle').height() < nWindowH_px );

  nTry = nWas;

  do{
   nWas = nTry;
   nTry = Math.floor( nTry * 1.1 );
   jQuery('#divTitle').css('font-size' ,nTry +'px');
  }while( nWas != nTry   &&   jQuery('#divTitle').height() < nWindowH_px );

  jQuery('#divTitle').css('font-size' ,nWas +'px');

— DaveWalley
แหล่งที่มา

1

นี่เป็นทางออกที่งดงามที่สุดที่ฉันได้สร้างขึ้น มันใช้การค้นหาแบบไบนารีทำซ้ำ 10 วิธีที่ไร้เดียงสาคือการวนรอบสักครู่และเพิ่มขนาดตัวอักษร 1 จนกว่าองค์ประกอบจะเริ่มล้น คุณสามารถตรวจสอบเมื่อองค์ประกอบเริ่มล้นใช้element.offsetHeightและelement.scrollHeight หาก scrollHeight ใหญ่กว่า offsetHeight คุณจะมีขนาดตัวอักษรที่ใหญ่เกินไป

การค้นหาแบบไบนารี่เป็นอัลกอริทึมที่ดีกว่าสำหรับสิ่งนี้ นอกจากนี้ยังถูก จำกัด ด้วยจำนวนการวนซ้ำที่คุณต้องการเล่น เพียงโทร flexFont และใส่รหัส div และมันจะปรับขนาดตัวอักษรระหว่าง8pxและ96 พิกเซล

ฉันใช้เวลาค้นคว้าหัวข้อนี้และลองใช้ห้องสมุดที่แตกต่างกัน แต่ท้ายที่สุดฉันคิดว่านี่เป็นทางออกที่ง่ายที่สุดและตรงไปตรงมาที่สุดที่จะใช้งานได้จริง

หมายเหตุถ้าคุณต้องการคุณสามารถเปลี่ยนการใช้offsetWidthและscrollWidthหรือเพิ่มทั้งสองไปยังฟังก์ชันนี้

// Set the font size using overflow property and div height
function flexFont(divId) {
    var content = document.getElementById(divId);
    content.style.fontSize = determineMaxFontSize(content, 8, 96, 10, 0) + "px";
};

// Use binary search to determine font size
function determineMaxFontSize(content, min, max, iterations, lastSizeNotTooBig) {
    if (iterations === 0) {
        return lastSizeNotTooBig;
    }
    var obj = fontSizeTooBig(content, min, lastSizeNotTooBig);

    // if `min` too big {....min.....max.....}
    // search between (avg(min, lastSizeTooSmall)), min)
    // if `min` too small, search between (avg(min,max), max)
    // keep track of iterations, and the last font size that was not too big
    if (obj.tooBig) {
        (lastSizeTooSmall === -1) ?
            determineMaxFontSize(content, min / 2, min, iterations - 1, obj.lastSizeNotTooBig, lastSizeTooSmall) :
                determineMaxFontSize(content, (min + lastSizeTooSmall) / 2, min, iterations - 1, obj.lastSizeNotTooBig, lastSizeTooSmall);

    } else {
        determineMaxFontSize(content, (min + max) / 2, max, iterations - 1, obj.lastSizeNotTooBig, min);
    }
}

// determine if fontSize is too big based on scrollHeight and offsetHeight, 
// keep track of last value that did not overflow
function fontSizeTooBig(content, fontSize, lastSizeNotTooBig) {
    content.style.fontSize = fontSize + "px";
    var tooBig = content.scrollHeight > content.offsetHeight;
    return {
        tooBig: tooBig,
        lastSizeNotTooBig: tooBig ? lastSizeNotTooBig : fontSize
    };
}

— Nick Gallimore
แหล่งที่มา

ขอบคุณมันดูดีมาก! ReferenceError: lastSizeTooSmall is not definedฉันเพียงแค่ได้รับ บางทีนั่นอาจจำเป็นต้องมีการกำหนดไว้ที่ไหนสักแห่ง?

— ndbroadbent

0

ฉันมีปัญหาเดียวกันและวิธีแก้ปัญหาโดยทั่วไปใช้จาวาสคริปต์เพื่อควบคุมขนาดตัวอักษร ตรวจสอบตัวอย่างนี้ใน codepen:

https://codepen.io/ThePostModernPlatonic/pen/BZKzVR

นี่คือตัวอย่างสำหรับความสูงบางทีคุณอาจต้องใส่บางอย่างเกี่ยวกับความกว้าง

พยายามปรับขนาด

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Documento sem título</title>
<style>
</style>
</head>
<body>
<div style="height:100vh;background-color: tomato;" id="wrap">        
  <h1 class="quote" id="quotee" style="padding-top: 56px">Because too much "light" doesn't <em>illuminate</em> our paths and warm us, it only blinds and burns us.</h1>
</div>
</body>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script>
  var multiplexador = 3;
  initial_div_height = document.getElementById ("wrap").scrollHeight;
  setInterval(function(){ 
    var div = document.getElementById ("wrap");
    var frase = document.getElementById ("quotee");
    var message = "WIDTH div " + div.scrollWidth + "px. "+ frase.scrollWidth+"px. frase \n";
    message += "HEIGHT div " + initial_div_height + "px. "+ frase.scrollHeight+"px. frase \n";           
    if (frase.scrollHeight < initial_div_height - 30){
      multiplexador += 1;
      $("#quotee").css("font-size", multiplexador); 
    }
    console.log(message);          
  }, 10);
</script>
</html>

— Heitor Giacomini
แหล่งที่มา

0

ฉันชอบ

let name = "Making statements based on opinion; back them up with references or personal experience."
let originFontSize = 15;
let maxDisplayCharInLine = 50; 
let fontSize = Math.min(originFontSize, originFontSize / (name.length / maxDisplayCharInLine));

— ตวนเหวียน
แหล่งที่มา

0

แค่ต้องการเพิ่มเวอร์ชันของฉันสำหรับ contenteditables

$.fn.fitInText = function() {
  this.each(function() {

    let textbox = $(this);
    let textboxNode = this;

    let mutationCallback = function(mutationsList, observer) {
      if (observer) {
        observer.disconnect();
      }
      textbox.css('font-size', 0);
      let desiredHeight = textbox.css('height');
      for (i = 12; i < 50; i++) {
        textbox.css('font-size', i);
        if (textbox.css('height') > desiredHeight) {
          textbox.css('font-size', i - 1);
          break;
        }
      }

      var config = {
        attributes: true,
        childList: true,
        subtree: true,
        characterData: true
      };
      let newobserver = new MutationObserver(mutationCallback);
      newobserver.observe(textboxNode, config);

    };

    mutationCallback();

  });
}

$('#inner').fitInText();

#outer {
  display: table;
  width: 100%;
}

#inner {
  border: 1px solid black;
  height: 170px;
  text-align: center;
  display: table-cell;
  vertical-align: middle;
  word-break: break-all;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="outer">
  <div id="inner" contenteditable=true>
    TEST
  </div>
</div>

ขยายตัวอย่างข้อมูล

— wutzebaer
แหล่งที่มา

0

ฉันพบวิธีป้องกันการใช้ลูปเพื่อย่อขนาดตัวอักษร มันปรับขนาดตัวอักษรโดยการคูณมันสำหรับอัตราระหว่างความกว้างของภาชนะและความกว้างของเนื้อหา ดังนั้นหากความกว้างของภาชนะบรรจุคือ 1/3 ของเนื้อหาขนาดตัวอักษรจะลดลงเหลือ 1/3 และจะเพิ่มความกว้างของคอนเทนเนอร์ ในการขยายขนาดฉันใช้การวนรอบสักครู่จนกว่าเนื้อหาจะใหญ่กว่าคอนเทนเนอร์

function fitText(outputSelector){
    // max font size in pixels
    const maxFontSize = 50;
    // get the DOM output element by its selector
    let outputDiv = document.getElementById(outputSelector);
    // get element's width
    let width = outputDiv.clientWidth;
    // get content's width
    let contentWidth = outputDiv.scrollWidth;
    // get fontSize
    let fontSize = parseInt(window.getComputedStyle(outputDiv, null).getPropertyValue('font-size'),10);
    // if content's width is bigger than elements width - overflow
    if (contentWidth > width){
        fontSize = Math.ceil(fontSize * width/contentWidth,10);
        fontSize =  fontSize > maxFontSize  ? fontSize = maxFontSize  : fontSize - 1;
        outputDiv.style.fontSize = fontSize+'px';   
    }else{
        // content is smaller than width... let's resize in 1 px until it fits 
        while (contentWidth === width && fontSize < maxFontSize){
            fontSize = Math.ceil(fontSize) + 1;
            fontSize = fontSize > maxFontSize  ? fontSize = maxFontSize  : fontSize;
            outputDiv.style.fontSize = fontSize+'px';   
            // update widths
            width = outputDiv.clientWidth;
            contentWidth = outputDiv.scrollWidth;
            if (contentWidth > width){
                outputDiv.style.fontSize = fontSize-1+'px'; 
            }
        }
    }
}

รหัสนี้เป็นส่วนหนึ่งของการทดสอบที่ฉันได้อัปโหลดไปยัง Github https://github.com/ricardobrg/fitText/

— Ricardo BRGWeb
แหล่งที่มา

0

ฉันไปกับโซลูชัน geekMonkey แต่ช้าเกินไป สิ่งที่เขาทำคือเขาปรับขนาดตัวอักษรให้สูงสุด (maxFontPixels) แล้วตรวจสอบว่ามันพอดีกับภายในคอนเทนเนอร์หรือไม่ มิฉะนั้นจะลดขนาดตัวอักษรลง 1px และตรวจสอบอีกครั้ง ทำไมไม่เพียงตรวจสอบความสูงของภาชนะก่อนหน้าแล้วส่งค่านั้น (ใช่ฉันรู้ว่าทำไม แต่ตอนนี้ฉันได้แก้ปัญหาที่ใช้งานได้เฉพาะบนความสูงและยังมีตัวเลือกขั้นต่ำ / สูงสุด)

นี่เป็นวิธีแก้ปัญหาที่เร็วกว่ามาก:

var index_letters_resize;
(index_letters_resize = function() {
  $(".textfill").each(function() {
    var
      $this = $(this),
      height = Math.min( Math.max( parseInt( $this.height() ), 40 ), 150 );
    $this.find(".size-adjust").css({
      fontSize: height
    });
  });
}).call();

$(window).on('resize', function() {
  index_letters_resize();
);

และนี่จะเป็น HTML:

<div class="textfill">
  <span class="size-adjust">adjusted element</span>
  other variable stuff that defines the container size
</div>

อีกครั้ง: โซลูชันนี้จะตรวจสอบความสูงของคอนเทนเนอร์เท่านั้น นั่นเป็นเหตุผลที่ฟังก์ชั่นนี้ไม่จำเป็นต้องตรวจสอบว่าองค์ประกอบเข้ากันดีหรือไม่ แต่ฉันก็ใช้ค่าต่ำสุด / สูงสุด (40 นาที, 150 แม็กซ์) ดังนั้นสำหรับฉันมันใช้งานได้อย่างสมบูรณ์แบบ (และยังสามารถปรับขนาดหน้าต่าง)

— honk31
แหล่งที่มา

-1

นี่เป็นอีกเวอร์ชั่นของโซลูชันนี้:

shrinkTextInElement : function(el, minFontSizePx) {
    if(!minFontSizePx) {
        minFontSizePx = 5;
    }
    while(el.offsetWidth > el.parentNode.offsetWidth || el.offsetHeight > el.parentNode.offsetHeight) {

        var newFontSize = (parseInt(el.style.fontSize, 10) - 3);
        if(newFontSize <= minFontSizePx) {
            break;
        }

        el.style.fontSize = newFontSize + "px";
    }
}

— PaulG
แหล่งที่มา