単語を壊すことなくできるだけ特定の幅でテキストを折り返す

Question

私は動的なテキストを含む要素を持っています。私はそのコンテナの30％を好むでしょうが、コンテンツが勝ったら長い言葉のせいで許されない。

特定の時間にインラインブロックの幅が30％になると、一部のテキストがコンテナをオーバーフローして悪く見えます。

私はインラインブロック幅autoを持つと、テキストはオーバーフローしませんが、コンテナは全く破損することなくテキストの長さが伸びます。

"幅で折り返し"を30％としたいので、テキストの折り返しが始まりますが、折り返しできない場合は十分に大きく伸ばしてください。

できれば100％のCSS回答が大好きです。私はJavascriptでそれをやる方法についていくつかのアイディアを持っていますが、可能ならばそれを避けたいと思います。

私はdisplay：table-cellでうんざりしていますが、これは100％の高さにする必要があるためレイアウトが乱れ、テーブルはそれを尊重しません。ここに示され

問題： http://codepen.io/nicklepedde/pen/gLYgpw

HTML：

<div class="con"> 
    <div class="side"> 
    Sometimes this text is long 
    </div> 
    <p>This is filled with other content that sets the height some what dynamically</p> 
    <p>This is filled with other content that sets the height some what dynamically</p> 
    <p>This is filled with other content that sets the height some what dynamically</p> 
    <p>This is filled with other content that sets the height some what dynamically</p> 
    <p>This is filled with other content that sets the height some what dynamically</p> 
    <p>This is filled with other content that sets the height some what dynamically</p> 
    <p>This is filled with other content that sets the height some what dynamically</p> 
    <p>This is filled with other content that sets the height some what dynamically</p> 
    <p>This is filled with other content that sets the height some what dynamically</p> 
    <p>This is filled with other content that sets the height some what dynamically</p> 
    <p>This is filled with other content that sets the height some what dynamically</p> 
    <p>This is filled with other content that sets the height some what dynamically</p> 
    <p>This is filled with other content that sets the height some what dynamically</p> 
    <p>This is filled with other content that sets the height some what dynamically</p> 
</div> 

はCSS：

.con{position:relative;width:600px;background:orange} 
.side{ 
    position:absolute; 
    left:0; 
    top:0; 
    width:30%; 
    height:100%; 
    background:yellow; 
    filter:opacity(.8); 
    font-size:50px 
} 

UPDATE： フォントサイズ、または使用される実際のテキストは、私のコントロール下にありませんあまりにも文字通り私の例を取らないでください。私はその言葉が大きすぎることを知っています、それはここで私に尋ねるポイントです。そして、いいえ、私はフォントサイズを変更することはできません、それは私が解決しようとしている問題のオプションではありません。

私はより密接に私の最終製品をシミュレートするために私codepenを更新： http://codepen.io/nicklepedde/pen/gLYgpw

Answer 1

あなたはちょうど左の要素を浮遊し、あなたが好きな割合で幅を設定することができます。マージンとパディングを設定すると、要素がページの下に移動しないように、グローバルなボックスサイズ：境界ボックスを設定してください。

*{ 
 
    box-sizing:border-box; 
 
} 
 
.con{ 
 
    /*position:relative;*/ 
 
    float:left; 
 
    width:70%; 
 
    /*width:600px;*/ 
 
    background:orange; 
 
    padding:4px; 
 
} 
 
.side{ 
 
    /*position:absolute; 
 
    left:0; 
 
    top:0;*/ 
 
    padding:4px; 
 
    float:left; 
 
    width:30%; 
 
    height:100vh; 
 
    background:yellow; 
 
    filter:opacity(.8); 
 
    font-size:50px /* for only 30% width, I would consider decreasing the font size */ 
 
}

<div class="side"> 
 
    Sometimes this text is long 
 
    </div> 
 
<div class="con"> 
 
    <p>This is filled with other content that sets the height some what dynamically</p> 
 
    <p>This is filled with other content that sets the height some what dynamically</p> 
 
    <p>This is filled with other content that sets the height some what dynamically</p> 
 
    <p>This is filled with other content that sets the height some what dynamically</p> 
 
    <p>This is filled with other content that sets the height some what dynamically</p> 
 
    <p>This is filled with other content that sets the height some what dynamically</p> 
 
    <p>This is filled with other content that sets the height some what dynamically</p> 
 
    <p>This is filled with other content that sets the height some what dynamically</p> 
 
    <p>This is filled with other content that sets the height some what dynamically</p> 
 
    <p>This is filled with other content that sets the height some what dynamically</p> 
 
    <p>This is filled with other content that sets the height some what dynamically</p> 
 
    <p>This is filled with other content that sets the height some what dynamically</p> 
 
    <p>This is filled with other content that sets the height some what dynamically</p> 
 
    <p>This is filled with other content that sets the height some what dynamically</p> 
 
</div>

ここでそれが役に立てば幸い、あなたのコードに私の編集です。

http://codepen.io/ciammarino/pen/dObNQO