ワードラップが発生した場合、divの幅を変更するにはどうすればよいですか？

Question

ワードラップが発生したときにdiv要素のサイズを変更できる場合あなたがそう改行はあなたが青い空のスペースが右側にあることがわかりますhappenesウィンドウを小さくしたい場合

.mypost { 
    border: 1px solid Peru; 
    margin: auto; 
    min-width: 200px; 
    display: inline-block; 
    background: red; 
} 
.test { 
    margin: 10px; 
    background: cyan; 
} 

：

<div class="mypost"> 
    <div class="test">I represent the imagdfv fdvdsdfsdfve.</div> 
</div> 

はCSS：についてのデモも同様の質問からfiddleを使用してみましょう。改行が起こったら、最初の行の最後の文字に達するまで青を減らしたい。

（ここで私は、改行を強制し、私は青が縮小したい）

これは可能ですか？

Answer 1

これは可能ではないかもしれないと思います。私はいくつかの検索を行いましたが、この重複した質問が見つかりましたが、その質問に対する解決策はありませんでした。How to remove extra space caused by word-wrap in shrunk to fit element?

ここで私はあなたが望むものに近いものを試しています。基本的には.testをインラインにしています。私は詰め物を容器に移した。

.mypost { 
 
\t border: 1px solid Peru; 
 
\t margin: auto; 
 
\t min-width: 200px; 
 
\t width:300px; 
 
\t display: inline-block; 
 

 
\t background: red; 
 
\t font-size:18px; 
 
\t line-height:20px; 
 
\t 
 
\t padding:10px; 
 
\t 
 
} 
 
.test { 
 
\t margin:0; 
 
\t background: cyan; 
 
\t display:inline; 
 
\t position: relative; 
 
}

<div class="mypost"> 
 
\t <div class="test" contenteditable="true"> 
 
\t \t EDIT ME..... Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
 
\t </div> 
 
</div>

Answer 2

TL; DR：ワードラップが発生するとランク

は、テキストを含むブロックレベル要素に関係なく、その容器を充填するために、できるだけ広いことが考えられていますテキストが壊れます。 、私にとって

target = document.getElementsByClassName('test')[0]; 
 
height = target.clientHeight; 
 
minWidth = 1; 
 
maxWidth = target.clientWidth; 
 
while(maxWidth - minWidth > 1) { 
 
    var newWidth = (minWidth + maxWidth)/2; 
 
    target.style.width = newWidth + "px"; 
 
    if(target.clientHeight > height) { 
 
    \t minWidth = newWidth; 
 
    } 
 
    else { 
 
    \t maxWidth = newWidth; 
 
    } 
 
} 
 
target.style.width = maxWidth + "px";

.mypost { 
 
    border: 1px solid Peru; 
 
    margin: auto; 
 
    width: 200px; 
 
    display: inline-block; 
 
    background: red; 
 
} 
 
.test { 
 
    margin: 10px; 
 
    background: cyan; 
 
}

<div class="mypost"> 
 
    <div class="test">I represent the imagdfv fdvdsdfsdfve.</div> 
 
</div>

Answer 3

：

一つは、開始高さの最小幅のボックスを見つけるためにJavaScriptを使用することができますが、これは繰り返しによる再描画に非効率的であり、それがCSSにあまりフレンドリーです

：私は、内側のdivのでdisplay: inline-block;

になるだろう10