2

これにより、div 内のテキストがオーバーフローしているかどうかを検出または検出する方法は、フォント サイズを小さくして、テキスト コンテンツが div に完全に収まるようにすることができます。 オーバーフローのある div

.c{    
    width:30px;
    height:30px;
    background-color:red;
    border-radius:100%;
    position:absolute;
    text-align:center;
    line-height:30px;
}

jquery.Thanksを使用してこれを見つける方法

4

2 に答える 2

2

これを試してください：

var c;
var max_height;
var current_height;
var current_font_size;

function fitFontSize(){
    current_height = c.height();
    current_font_size = parseInt( c.css("font-size") );
    if(current_height > max_height){
        console.log("Overflow!")
        current_font_size --;
        c.css("font-size" , current_font_size+"px") ;       
        fitFontSize();
    }
}

$(function(){
    c = $(".c");
    max_height = parseInt( c.css("min-height") );
    fitFontSize();
});

トリックは、min-heightの代わりに使用することですheight。

JSFiddle: http://jsfiddle.net/dpQ9t/2/

于 2013-09-08T10:07:41.513 に答える
0

解決策は、次のように問題を考えることだと思います。

  1. 可変半径の円があります。
  2. 可能な最大辺の長さを持つ円の内側に正方形があります。
  3. 辺の長さを調整して、正方形が円の内側に収まるようにする必要があります。

明らかに、円は外側の div を表し、四角は内側のテキストを表します。私はあなたが望むことを正確に行うためにいくつかのjQuery関数を書きました。

ここにJSfiddleがあります。それが役に立てば幸い。

これを説明すると、

  • まず、すべてのテキストを内部 div 内に配置します。これは、高さと幅を正しく計算できるようにするためです。

    <div class="circle">
    <div class="text">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta, quisquam, mollitia, dolores sit accusamus molestiae necessitatibus rerum nisi natus itaque amet maiores tempore veniam qui aut ullam odio magnam quidem!
    </div>
</div>

  • また、テキスト ボックスのパディングが邪魔にならないように、box-sizing

    .circle .text {
    border: 1px solid #bbb;
    background: #fff;
    font-size: 16px;
    /* This box sizing is necessary for inner calculations */
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    padding: 5px;
}

  • 最後に、テキスト div の高さが計算された正方形の辺の長さよりも大きい場合、JavaScript を使用してフォント サイズ プロパティを計算します。それ以外の場合は、マージンを調整して、中央に表示されるようにします。

    $('.circle').each(function() {
    //Get the container and inner text
    var circle = $(this),
    text = $(this).find('>.text');


    //Get some variables
    var height = circle.height(),
    width = circle.width(),
    radius = 0,
    sideLength = 0,
    margin = 0,
    fontSize = 0;

    //Fix it if necessary
    if(height !== width) {
        radius = Math.round(parseFloat(Math.max(height, width) / 2, 10));
        circle.height(radius * 2).width(radius * 2);
    } else {
        radius = Math.round(height / 2);
    }

    //Now calculate a square box inside the circle to put the text into
    //This is pure maths
    //The diagonal of the square is basically two times of the radius
    //Which means side is approximately radius * 1.4142
    sideLength = Math.round(radius * 1.4142);

    //Thus calculate the margin
    margin = ( height - sideLength ) / 2;

    //Assign the width
    text.css('width', sideLength);

    //Assign the margin
    text.css({
        'margin-left' : margin,
        'margin-top' : margin
    });

    //lets center the text if it's height is less than sideLenght
    if(text.height() < sideLength) {
        var newMarginTop = (height - text.height()) / 2;
        text.css('margin-top', newMarginTop);
    } else if(text.height() > sideLength) { //Or adjust the font
        //Now keep on decreasing the font until the height of the text becomes
        //less than or equal to the calculated size
        while(text.height() > sideLength) {
            fontSize = parseInt(text.css('font-size'), 10);
            text.css('font-size', --fontSize);
        }
    }
});

説明できることを願っています。わからないことがあれば教えてください。

于 2013-09-08T10:41:22.783 に答える