ダイナミックテキストを作成して特定のポイントに限定するにはどうすればよいですか？

Question

最大の領域に収まるようにテキストを分割したいが、領域は動的でテキストの量も同じです。私はので、私はこの画像はイメージが、私はそれになりたい方法を示していますが、div要素のサイズとテキストの長さは、両方のダイナミックなので

を助けになると思うの言葉でそれを置くラフの時間を持っています。いくつかの解像度では、テキストが分解され、divからボタンが押し出されます。 ボタンに達する前に、最後の行でテキストを正しく改行する方法はありますか？

.div { 
    position: relative; 
    width: 100%; 
    height: 44vh; 
    display: inline-block; 
} 

.text { 
    font-size: 100%; 
    text-align: left; 
    margin-top: 5px; 
    margin-left: 15px; 
    margin-bottom: 0px; 
    word-wrap: break-word; 
} 


#Button { 
    font-size: 1vw; 
    text-align: center; 
    display: inline-block; 
    background-color: green; 
    padding: 15px; 
    margin-top: 15px; 
    cursor: pointer; 
} 

jsfiddle here

Answer 1

私はおそらく、ワードラップは、あなたが探しているものかもしれないと思われます。

https://www.w3schools.com/cssref/css3_pr_word-wrap.asp

Answer 2

それがボタンになる前に、私は最後の行にテキスト休憩を右作ることができる方法はありますか？あなたがword-wrap: break-word;とwhite-space: nowrap;

.text-wrapper { 
    word-wrap: break-word; 
    white-space: nowrap; 
    overflow: hidden; 
} 

の組み合わせを使用することができます

.container { 
 
    border: 1px solid green; 
 
    padding: 5px; 
 
    text-align: center; 
 
} 
 

 
.text-wrapper { 
 
    border: 1px solid blue; 
 
    word-wrap: break-word; 
 
    white-space: nowrap; 
 
    overflow: hidden; 
 
}

<div class="container"> 
 
    <div class="text-wrapper"> 
 
    Lorem Ipsum Dolor Gedhang Goreng Lorem Ipsum Dolor Gedhang Goreng Lorem Ipsum Dolor Gedhang Goreng 
 
    </div> 
 
    <button>Button</Button> 
 
</div>