将H1与DIV的右下角对齐

Question

我有以下代码将H1与div的底部对齐：

CSS：

h1wrap{
  position: relative;
  height: 80px;
  width: 358px;
}
h1{
  position: absolute;
  bottom: 0;
  width: 100%;
  text-align: right;
}

HTML:

<div class="h1wrap">
  <h1>title</h2>
</div>

这部分符合我的要求。。。if将标题的文本对齐在div的底部，并将其向右对齐。但是，我不想在包装到下一行之前，H1尽可能多地填充第一行，而是想先填充最后一行，然后再向上。。。

因此，像"这是一个很长的标题"这样的标题现在将被包装为：

THIS IS A VERY LONG
              TITLE

应该是这样的：

                THIS
IS A VERY LONG TITLE

我创建了这个JsFiddle，它有上面的代码，并展示了我到目前为止是如何做到的。CSS解决方案将是完美的！

Answer 1

这是一个CSS解决方案，支持可能会受到限制，因为我在上找不到它http://caniuse.com/但它现在对我在IE工作…

将此添加到您的H1：writing-mode: rl-bt

Fiddle：http://jsfiddle.net/rd3vzq48/1/

参考编号：https://developer.mozilla.org/en-US/docs/Web/CSS/writing-mode

Answer 2

据我所知，在不更改标记的情况下，没有广泛支持的方法可以做到这一点。如果你不能使用writing-mode: rl-bt，我的下一个想法是flex box，但你必须让每个单词都成为自己的元素。

可能不可行，但以防万一：Fiddle

标记：

<div class='h1wrap'>
  <h1><span>This</span> <span>Is</span> <span>A</span><span>Very</span> <span>Long</span> <span>Title</span></h1>
</div>

造型：

h1{
  position: absolute;
  bottom: 0;
  width: 100%;
  display: flex;
  flex-flow: row wrap;
  flex-wrap: wrap-reverse;
  justify-content: flex-end;
}
h1 span {
  margin: 0 2px; /* otherwise you loose the space between words */
}