将元素保留在框中会考虑第一个框中的文本数量

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>

​

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>

​

Answer 2

您可以尝试如下所示：

​

.wrap{
  height:140px;
  display:flex;
  align-items:center;
  align-content:center;
  flex-wrap:wrap;
  padding:0 25px;
  margin:5px;
  background:gold;
}

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

.auth{
  margin:5px 0 5px auto;
}

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


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

​

Answer 3

如果.story文本没有填满整个空间，您是否要求它在水平方向居中？有两个选项。

首先，您看不到想要的结果的原因是因为.story div的宽度将是100%，并且没有简单的方法来调整它以适应您的文本内容。通过flex属性，您的div是水平居中的；但是，它占据了整个宽度，所以您不会注意到。

一种解决方案是将文本对齐设置为居中，但这似乎不是您想要的结果，因为您已经将其设置为对齐。

因此，我建议的解决方案是将水平边距从0重置为自动。这将根据两边的可用空间相等地填充水平边距。

这就是你想要的吗？

此外，正如@neaumusic已经说过的，您应该删除重复的CSS条目。

​

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

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

​