8

こんなことはありえないと思いますが、ここには賢い人がたくさんいるので、聞いてみようと思いました。コンテンツの量に応じて幅が異なるフルハイトのコンテナを作成する方法を探しています。可能な限り最小の幅を使用しながら、テキストが全高を占める領域を埋めるようにします。高さは既知でハードコードされていますが、コンテンツの量は不明です。

私はこのようなもので働いています:

<div>
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.
    Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,
    when an unknown printer took a galley of type and scrambled....</p>
</div>

div {
    background:red url(http://lorempixel.com/600/400/);
    float:left;
    width:600px;
    height:400px;
}
p {
    background:#fff;
    padding:20px;
    margin:20px;
}

通常、コンテンツはページを上から下に埋めます。

ここに画像の説明を入力

私が探しているのは、左から右に記入する、一種の反対です。

ここに画像の説明を入力

コンテンツが少ない場合、次のようになります。

ここに画像の説明を入力

ハードコーディングされた完全な高さを使用するとwidth:auto、次の効果が得られます。

ここに画像の説明を入力

幅をハードコーディングしたり、テキストをオーバーフローさせたりせずに、可能な限り最小の幅でテキストを高さいっぱいにする方法はありますか? それは不可能に思えますし、私はそれにアプローチする方法がわかりません。Javascript/jQuery ソリューションを歓迎します。

4

5 に答える 5

3

私が念頭に置いているのは、単純な jQuery ソリューションです。while ループで、高さがコンテナーの高さを超えるたびにループが実行されるように条件を設定します。<p>ループでは、高さがコンテナーの高さを超えなくなるまで、ピクセルごとに幅を増やします:)

$(document).ready(function() {
    // The 400-80 is because you have to subtract the container padding and the element's own padding
    while($("div > p").height() > 400 - 80) {
        currentWidth = $("div > p").width();
        $("div > p").width(currentWidth + 1);    
    }
});

http://jsfiddle.net/teddyrised/RwczR/4/

CSS にもいくつか変更を加えました。

div {
    background:red url(http://lorempixel.com/600/400/);
    float:left;
    overflow: hidden;
    width:600px;
    height:400px;
    padding: 20px;
    box-sizing: border-box;
}
p {
    background:#fff;
    padding: 20px;
    width: 1px;
}
于 2013-03-05T15:29:26.153 に答える
1

これを試して：

var p = $('p');
var height = parseInt(p.height())-40;
p.height('auto');
p.width('auto');
for(var i=p.width(); i--; ) {
    p.width(i);
    if (p.height() > height) {
        p.height(height+20);
        p.width(i-1);
        break;
    }
}
p.height(height);

http://jsfiddle.net/RwczR/6/

于 2013-03-05T15:40:43.400 に答える
1

jQuery/JavaScript を使用してクライアントとスクロールの高さを確認すると、以下のように、テキストに収まるまで幅を増やし続けます。

オーバーフローを含む実際の高さを得るには、タグoverflow: hidden;の CSSも設定する必要があります。pscrollHeight

以下のコードでは、両方のマージンとパディングも考慮されています。高さと幅に応じて調整します。

それに応じて外側の div ajdust の高さを変更します。

$(document).ready(function(){
    var $container = $("div");
    var containerHeight = $container.height();
    var containerWidth = $container.width();

    var $textWrapper = $(">p", $container);

    var paddingMarginHeight = $textWrapper.outerHeight(true) - $textWrapper.innerHeight();
    var paddingMarginWidth = $textWrapper.outerWidth(true) - $textWrapper.innerWidth();

    $textWrapper.innerHeight(containerHeight - paddingMarginHeight);

    //SetMinWidth();
    var maxWidth = containerWidth - paddingMarginWidth;
    var visibleHeight = 0;
    var actualHeight = 0;

    for(i = 50; i <= maxWidth; i++){
        $textWrapper.innerWidth(i);

        visibleHeight = $textWrapper[0].clientHeight;
        actualHeight = $textWrapper[0].scrollHeight;

        if(visibleHeight >= actualHeight){
            break;
            console.log("ouyt");
        }
    }
});

デモ- テキストが完全に表示されるまで幅を

于 2013-03-05T15:44:42.877 に答える
1

これは、JavaScript で行うのはそれほど難しくありません。JSなしでそれを行う方法がわかりません（それが可能であれば）。

別の「見えない」div を使用して、320px の高さに達するまで寸法を測定し、設定された量 (可能な限り正確にしたい場合は、一度に 1 ピクセルでも) を縮小することができます。

var $measurer = $("<div>").css({'position': 'fixed', 'top': '100%'})
    .text($("p").text()).appendTo('body');

var escape = 0;
while ($measurer.height() < 320) {
    console.log($measurer.height());
    $measurer.width(function (_, width) { return width - 1; });
    console.log($measurer.width());
    escape++;
    if (escape > 2000) {
        break;
    }
}
$("p").width($measurer.width());
$measurer.remove();

http://jsfiddle.net/RwczR/2/

于 2013-03-05T15:29:24.797 に答える
0

段落に を与えることができますoverflow:auto;。

段落に垂直スクロール バーが必要な場合は、作成されます。

トリックは、スクロールバーが作成されるまで、幅を締め続けることです。

var hasScrollBar = false;
var p = document.getElementById('myParagraph');
while(!hasScrollBar)
{
    if(p.scrollHeight>p.clientHeight)
    {
        //Has Scroll Bar
        //Re-Increase Width by 1 Pixel
        hasScrollBar=true;
        p.style.width=(p.clientWidth+1)+"px";
    }
    else
    {
       //Still no Scroll Bar
       //Decrease Width
       p.style.width=(p.clientWidth-1)+"px";
    }
}
于 2013-03-05T15:44:36.580 に答える