如何创建从底部延伸至顶部的倒置Copywrite标签（文字朝向页面）

要实现侧边固定的竖排版权标签，阅读顺序从页面底部向上延伸至顶部，文字自然朝向右侧不需要歪头阅读，完全匹配参考图效果，根本不需要复杂的手动位移计算，用CSS原生排版能力就能低成本搞定：

实现步骤 #

• 先搭好定位基础
  这类标签一般固定在页面左右两侧的靠边位置，设置高度占满整个屏幕纵向空间，用flex布局让文字块在纵向空间自然居中，避免手动计算上下边距带来的位置偏移。
• 用原生竖排属性替代生硬的整体旋转
  很多人习惯直接给元素加90度旋转做竖排，很容易出现文字朝向不对、排版错位的问题，配合两个核心CSS属性就能得到符合要求的文字方向和排布顺序：

  .copyright-tag {
    position: fixed;
    right: 1rem;
    top: 0;
    height: 100vh;
    display: flex;
    align-items: center;
    /* 核心竖排排版设置 */
    writing-mode: vertical-lr;
    text-orientation: mixed;
    /* 把默认从上到下的排向，调整为从底部起始向上排布 */
    transform: rotate(180deg);
    letter-spacing: 0.15em;
    color: #999;
    font-size: 0.85rem;
  }
  

常见坑点 #

• 不要单独靠transform: rotate(90deg)实现竖排：这种方式会让文字的排版流和实际视觉位置完全脱节，遇到较长的版权文本很容易出现内容溢出、位置偏移的问题，每次修改文字内容都要反复手动调整偏移量，维护成本极高。
• 没必要用JS逐字拼接实现竖排：每次修改版权文案都要重新计算每个字的位置，适配不同尺寸屏幕的成本很高，远不如纯CSS方案灵活。

内容的提问来源于stack exchange，提问作者Dipesh Pokhrel