如何使动态文本限制在某一点？

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;
}

请参阅此示例

＆＃13;

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;