0

テキスト フィールドのコンテンツ全体を表示し、オーバーフローしないようにテキスト サイズを動的に調整する必要がある div を実行しています。

問題を理解するには、こちらをご覧ください http://sandbox.littlegraffyx.com/bible/

GEN 1:1「創世記 1:1」の形式を使用して、左下のテキスト ボックスに詩を入力してみてください。

私の問題は、長い詩を表示しようとすると、切り捨てられることです。現在のテキストの長さに基づいてサイズを変更する必要があります。テキスト フィールドのサイズに基づいて適用できる css はありますか?

4

2 に答える 2

1

コメントで述べたように、純粋な CSS を使用して、含まれる要素の高さに基づいてテキストをスケーリングすることはできません。しかし、これは私が過去にあなたが望むものを達成する必要があるときに使用した小さな jQuery スクリプトです。また、ユーザーがブラウザ ウィンドウのサイズを変更すると、テキスト サイズも調整されます。

HTML:

<p class="quote">
Really long text goes here...
</p>​

CSS:

.quote {
    // The largest size to display text at.
    font-size: 36px;
}​

JS:

$(window).bind('resize',function(e){
    scaleQuote();
});

function scaleQuote(){    
    var quote = $('.quote');
    var winH = $(window).height();

    // Reset font size.
    quote.css('font-size', '');

    // If quote is larger than viewport, reduce font-size until it fits.
    while (winH < (quote.height())){
        var fontSize = parseInt(quote.css('font-size'), 10);
        quote.css('font-size', fontSize-1+'px');
    }
}

scaleQuote();​

デモ: http://jsfiddle.net/eCBmc/2/

于 2012-06-16T07:09:32.997 に答える
0

このようなものを試すことができます。入力フィールドを10文字に設定し、それが大きい場合はサイズを大きくします。 http://jsfiddle.net/4qjjf/1/

<html>
<body>
<textarea cols="10" rows="1" id="shit"
onkeyup="this.cols=this.value.length>10?this.value.length:10;"></textarea>
</body>
</html>​
于 2012-06-16T07:14:11.983 に答える