동적 텍스트를 특정 지점으로 제한하려면 어떻게해야합니까?

Question

최대 영역에 맞게 텍스트를 분할하고 싶지만 영역은 동적이며 텍스트의 양도 마찬가지입니다. 나는이 이미지는 이미지가 내가 될하지만하는 방법을 보여줍니다

도움이 될 것입니다 생각, 그래서 나는 거친 시간 단어에 넣어가 있어요 사업부의 크기와 텍스트의 길이가 모두 동적이기 때문에; 일부 해상도에서 텍스트가 나눠지고 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>