html - 无论第一个文本的数量如何，都将元素保留在框中

Question

我有说法和作者。

如果一句话有足够多的文字 - 一切都很好 - 第一个例子

如果一句话很短——设计很丑——第二个例子。

如何将所有内容保存在框中和中心 - 无论文本数量如何story？

.wrap{
  height:140px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:0 25px;
  background:gold;
}

.story{
  display:inline-block;
  text-align:justify;
  margin:5px 0;
}

.auth{
  display:inline-block;
  text-align:right;
  margin:5px 0;
}

<div class='wrap'>
<div class='story'>lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet</div>
<div class='auth'>author</div>
</div>

<br>

<div class='wrap'>
<div class='story'>lorem ipsum dolor sit amet</div>
<div class='auth'>author</div>
</div>

标签： htmlcss

Answer 1

正如在评论中与您讨论的那样，您可以这样做，如果需要其他内容，请告诉我

.wrap{
  display:flex;
  align-items: center;
  justify-content:space-between;
  padding:0 25px;
  background:gold;
margin-bottom: 20px;
flex-direction: column;
}

.story{
  text-align:justify;
  margin:5px 0;
}

.auth{
  margin:5px 0 5px 20px;
  align-self: flex-end;
}

<div class='wrap'>
<div class='story'>lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet lorem ipsum dolor sit amet</div>
<div class='auth'>author</div>
</div>

<br>

<div class='wrap'>
<div class='story'>lorem ipsum dolor sit amet</div>
<div class='auth'>author</div>
</div>

<div class='wrap'>
<div class='story'>lorem ipsum dolor sit ametlorem ipsum dolor sit ametlorem ipsum dolor sit ametlorem ipsum dolor sit ametlorem ipsum dolor sit ametlorem ipsum dolor sit ametlorem ipsum dolor sit ametlorem ipsum dolor sit ametlorem ipsum dolor sit ametlorem ipsum dolor sit ametlorem ipsum dolor sit ametlorem ipsum dolor sit ametlorem ipsum dolor sit ametlorem ipsum dolor sit ametlorem ipsum dolor sit ametlorem ipsum dolor sit ametlorem ipsum dolor sit ametlorem ipsum dolor sit ametlorem ipsum dolor sit ametlorem ipsum dolor sit ametlorem ipsum dolor sit ametlorem ipsum dolor sit ametlorem ipsum dolor sit ametlorem ipsum dolor sit ametlorem ipsum dolor sit ametlorem ipsum dolor sit ametlorem ipsum dolor sit ametlorem ipsum dolor sit ametlorem ipsum dolor sit ametlorem ipsum dolor sit ametlorem ipsum dolor sit ametlorem ipsum dolor sit amet</div>
<div class='auth'>author</div>
</div>