旋转 p 个段落

Question

我正在尝试旋转段落，但是它们没有足够的空间并且混淆了。如何将它们分开？

最后一个孩子必须不可见，因此不显示。此外，它们之间不能有空隙。所以基本上它应该像

Hello.Move.Explore.Bla.

然后转了90度。然而，这是我得到的：

我尝试了带有 flexbox 列的 div，但是它在 p-tags 之间产生了空间。

Hello.Move.Explore.Bla.

p {
    transform: rotate(90deg);
    transform-origin: 0 100%;
    white-space: nowrap;
}

p:last-child {
    display: none;
}

Answer 1

而不是关闭rotate，使用writing-mode: vertical-rl;：

writing-mode

书写模式 CSS 属性设置文本行是水平布局还是垂直布局...

vertical-rl

对于 ltr 脚本，内容从上到下垂直流动，下一条垂直线位于上一条线的左侧。对于 rtl 脚本，内容从下到上垂直流动，下一条垂直线位于上一条线的右侧。

p {
  writing-mode: vertical-rl;
}

p:last-child {
   display: none;
}

<div>
    <p>Hello.</p>
    <p>Move.</p>
    <p>Explore.</p>
    <p>Bla.</p>
    <p>Longword.</p>
</div>

有关浏览器兼容性，请参阅此图表或CanIUse。