如何实现容器内垂直文本 长文本从下到上对齐不向下溢出

你遇到的对齐问题是固定定位逻辑+旋转坐标系不匹配文本长度变化导致的，和transform属性本身无关，该效果完全可以实现，核心修改思路是改用writing-mode配合弹性布局实现自适应对齐，避免旋转带来的坐标偏移问题。

修改后的CSS代码（仅需调整.potw-outline选择器属性） #

.potw-outline{
  position: absolute;
  -webkit-text-stroke-width: 1px;
  -webkit-text-stroke-color: #fff;
  font-size: 2.188rem;
  line-height: 39px;
  text-transform: uppercase;
  font-weight: 700;
  /* 替换原有定位、旋转属性 */
  left: 0;
  top: 0;
  height: 100%;
  margin: 0;
  /* 竖排文本设置 */
  writing-mode: vertical-lr;
  transform: rotate(180deg);
  transform-origin: left center;
  /* 左移到卡片外侧 */
  translate: -100% 0;
  /* 底部对齐控制 */
  display: flex;
  align-items: flex-end;
  letter-spacing: 2px;
}

实现说明 #

• 用writing-mode: vertical-lr实现原生竖排文本，避免transform旋转带来的元素尺寸、定位坐标换算问题
• transform: rotate(180deg)将竖排文本翻转为从下到上的阅读顺序，匹配设计要求
• align-items: flex-end强制文本始终沿卡片底部对齐，文本长度增加时自动向上延伸，适配不同长度的球员姓名
• 不需要修改原有HTML结构，仅调整CSS即可生效

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