【JavaScript】htmlで縮小して全体を表示

overflow: hiddenとかscrollとか、そういうのじゃなくて縮小して納めてよという時にどうぞ。
これまた泥臭い手法です。いわゆるバッドノウハウとはこういうことでしょうか。

jQuery.fn.extend({
    isProtrudeHeight: function(){
        var orgScrollTop = this.scrollTop();
        this.scrollTop(0);
        this.scrollTop(1);
        var result = (this.scrollTop() > 0);
        this.scrollTop(orgScrollTop);
        return result;
    },
    compressionFontSize: function(){
        this.each(function(){
            $this = $(this);
            var fontSize = parseInt($this.css('fontSize').replace('px', ''));
            while ($this.isProtrudeHeight() && fontSize >= 0){
                $this.css('fontSize', --fontSize + 'px');
            }
        });
        return this;
    }
});

呼び出し方はこんな感じ

$("div").compressionFontSize();

結果がこれ

処理前

処理後

css3のtransformを使えばギュッと横幅だけ縮めて納めたりもできますが、それはまた別の話。