垂直书写模式元素的容器使用它们的高度来计算容器的宽度

Question

我想要实现的是具有垂直书写模式标题的水平滚动图像。该模型看起来像这样：

<figure>
  <div class="image"></div>
  <figurecaption>
    <p class="vertical">This is the caption text.</p>
  </figurecaption>
</figure>

当我尝试将图形标题的书写模式设置为垂直时，容器（）似乎仍然使用标题的原始宽度（垂直高度）来计算其宽度。所以数字之间存在差距。

我可以指定容器的显式宽度以消除间隙。我想知道是否有更好的方法可以使容器的宽度适合其内容。

这是jsfiddle：http://jsfiddle.net/XGC2B/1/

以下是最低版本：http://jsfiddle.net/zw8Gr/1/

Answer 1

似乎它不喜欢“内嵌块”显示！

这是在我的浏览器上进行的：http://jsfiddle.net/zw8Gr/10/

p.vertical {
    -webkit-writing-mode: vertical-rl;
}