如何使動態文本限制到某個特定點？

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>