如何将文本从div底部开始排列？

Question

我希望元素内的文本进行对齐，使其从页面底部开始。我希望这样当我增加或减少 div 的宽度时，文本会先填充底部，然后再填充顶部。

我想要看起来像下面来自 adobe illustrator 的设计：

相反，它看起来像下面这样：

第二张图片中使用的代码如下：

<style media="screen">
  *{
    font-family: 'Heebo', sans-serif;
  }
  .big-intro-text{
    font-size: 100px;
    width: 100%;
    position: absolute;

  }
  .big-intro-text div{
    border: solid 1px green;
    text-align: left;
    color: gray;
    max-width: 800px;
    height: auto;
    display: inline-block;
    vertical-align: text-bottom;
  }
</style>

<div class="big-intro-text" align = "center">
  <div>home of the zebras</div>
</div>

Answer 1

* {
  font-family: 'Heebo', sans-serif;
}

.big-intro-text {
  font-size: 100px;
  width: 100%;
  position: absolute;
}

span {
  display: block;
}

.big-intro-text div {
  border: solid 1px green;
  text-align: left;
  color: gray;
  max-width: 800px;
  height: auto;
  display: inline-block;
  vertical-align: text-bottom;
}

<div class="big-intro-text" align="center">
  <div><span>home<span> of the zebras</div>
</div>

试试这个代码。

Answer 2

我认为没有办法用 CSS 样式来做到这一点。一种方法是将第一个单词放在具有块定位的单独 HTML 元素中，如下所示：

<div>
  <p>home</p>
  <p>of the zebras</p>
</div>

抱歉旧答案，我不明白这个问题。