0

了解しました。これが私がやろうとしていることです。次のHTMLがあるとしましょう。

<div id="test">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>

そして次のCSS：

#test {
    height: 100px;
    min-width: 100px;
}

ここで、上記のHTMLの段落の長さが可変であると想像してみましょう。または、2つの段落があるかもしれません。それは本当に重要ではありません。私が探しているのは、CSSまたはjQueryの方法で、div常に高さを100ピクセルのままにし、最終的に幅を100ピクセル以上にしますが、垂直方向のオーバーフローを防ぐために必要な幅を超えないようにします。

したがって、コンテンツが十分に短い場合（たとえば、1つの単語）div、高さは100ピクセル、幅は100ピクセルになります。コンテンツが段落全体の場合、divの高さは100ピクセルのままで、コンテンツは垂直方向に塗りつぶされ、オーバーフローを防ぐのに十分なだけdiv水平方向に拡張されます。

4

2 に答える 2

0

次のことを試すことができます。

#test{
    display: inline-block;
    height: 100px;
    min-width: 100px;
    max-width: 100%;
    overflow: auto;
}
于 2012-10-24T18:53:34.577 に答える
0

ループを使用しwhileて内側の段落の高さを計算し、親divの幅が収まるまで継続的に調整します。

while ($('#test > p').height() > $('#test').height()) {
    $('#test').width($('#test').width() + 1); // or +5 or +10 for a faster result
}

http://jsfiddle.net/mblase75/MFHah/

警告：これにより、特定の状況で無限ループが発生する可能性があります。

于 2012-10-24T18:54:00.953 に答える