Mam podświetleniowy div z tekstem wewnątrz. Chcę, aby tekst był skalowany jako rozmiar div zmienia rozmiar.

W szczególności chcę, aby tekst miał największy możliwy rozmiar czcionki, który sprawi, że pasuje do wewnątrz div.

5
Randomblue 26 październik 2011, 12:51

4 odpowiedzi

Najlepsza odpowiedź

Użyj FittExt http://fittextjs.com/

3
Idered 26 październik 2011, 08:53

Używam Ta wtyczka że dokonałem na podstawie fittekst

$.fn.adjustTextSize = function (set_max_size, min_size) {
    min_size = min_size || 12; // if no value then set a default one
    var string, width, line, initFontSize, returnFontSize, ratio;

    return this.each(function() {
        // Store the object
        var $this = $(this);

        var resizer = function () {
            string = $this;
            string.html('<span style="white-space: nowrap;">' + string.html() + '</span>');

            width = string.width();
            line = $(string.children('span'));
            initFontSize = parseInt(string.css('font-size'));
            ratio = width/line.width();

            returnFontSize = initFontSize*ratio;

            if (set_max_size && returnFontSize > initFontSize) {
                returnFontSize = initFontSize;
            }

            if (min_size && returnFontSize < min_size) {
                returnFontSize = min_size;
            }

            string.css('font-size',returnFontSize);
            while (line.width() >= width) {
                if (min_size && returnFontSize <= min_size) {
                    string.html(line.html());
                    return false;
                }
                string.css('font-size', --returnFontSize);
            }
            string.html(line.html());
        }

        // Call once to set.
        resizer();

        // Call on resize. Opera debounces their resize by default.
        $(window).on('resize orientationchange', resizer);
    });
};
$('.js-adjust-text').adjustTextSize(false, 12);
$('.js-adjust-text-limit').adjustTextSize(true, 30);

Ta wtyczka otrzymuje dwa parametry:

  • set_max_size: Boolean, aby ograniczyć maksymalny rozmiar czcionki do określonego rozmiaru w CSS
  • Min_size: Numer całkowcowy do ograniczenia minimalnego rozmiaru czcionki.

Mam nadzieję, że działa na twoją sprawę.

1
Jaime Fernandez 21 listopad 2013, 14:45

Możesz spróbować tak:

Jeśli chcesz dostosować wysokość, spróbuj ustawić wysokość do Auto

$("#sample").modal({
 containerCss:{
  backgroundColor:"#fff",
  borderColor:"#0063dc",
  height:450,
  padding:0,
  width:830
 }
});
0
coder 26 październik 2011, 08:56

Oto trochę zmienionego kodu powyżej, ponieważ jest to dla uzyskania szerokości kontenera, którą dokonałem edycji do regulacji pojemnika na henh.

$.fn.adjustTextSize = function (set_max_size, min_size) {

    min_size = min_size || 12; // if no value then set a default one
    var string, height, line, initFontSize, returnFontSize, ratio;

    return this.each(function() {
        // Store the object
        var $this = $(this);

        var resizer = function () {
            string = $this;
            string.html('<span>' + string.html() + '</span>');

            height = string.height();
            line = $(string.children('span'));
            initFontSize = parseInt(string.css('font-size'));
            ratio = height/line.height();

            returnFontSize = (initFontSize*ratio) ;

            if (set_max_size && returnFontSize > initFontSize) {
                returnFontSize = initFontSize;
            }

            if (min_size && returnFontSize < min_size) {
                returnFontSize = min_size;
            }

            string.css('font-size',returnFontSize);
            while (line.height() >= height) {
                if (min_size && returnFontSize <= min_size) {
                    string.html(line.html());
                    return false;
                }
                string.css('font-size', --returnFontSize);
            }
            string.html(line.html());
        }

        // Call once to set.
        resizer();

        // Call on resize. Opera debounces their resize by default.
        $(window).on('resize orientationchange', resizer);
    });
};

Mam nadzieję, że będzie przydatne

0
Jozífek Chramršt 21 luty 2014, 18:51