html - 轮换 p 段

Question

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

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

Hello.Move.Explore.Bla.

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

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

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

p:last-child {
    display: none;
}

<div class="transform90">
    <p>Hello.</p>
    <p>Move.</p>
    <p>Explore.</p>
    <p>Bla.</p>
    <p>Longword.</p>
</div>

标签： htmlcss

Answer 1

取而代之的是rotate，使用writing-mode: vertical-rl;：

writing-mode

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。