使用writing-mode: vertical-rl实现垂直按钮时Safari移动端文字截断问题

数据老陈

2026-10-13

问题根因

Safari 浏览器对 writing-mode: vertical-rl 垂直书写模式的元素尺寸计算存在原生兼容缺陷，当垂直文本被 flex、grid 容器包裹时，无法正确计算容器的自适应宽高，最终导致文本溢出、被容器截断。

修复步骤

你可以按照以下规则修改CSS代码解决问题：

为垂直文本元素添加 -webkit-writing-mode 前缀属性适配 Safari 内核，同时添加 text-orientation: mixed 适配多语种的字符朝向
调整文本按钮的布局规则，将 display: grid 替换为 display: flex 避免布局冲突，显式指定 width: fit-content 开启宽高自适应
移除外层容器不必要的尺寸限制，修正固定定位下的尺寸计算逻辑

修复后完整CSS代码

body {
  height: 100%;
  width: 100%;
}

.wrapper.center-right {
  cursor: pointer;
  position: fixed;
  height: auto;
  width: auto;
  margin: 0;
  padding: 0;
  display: flex;
  z-index: 2147483647;
  background: red;
  top: 50%;
  flex-direction: column;
  right: 0;
  transform: translate(0, -50%);
  transform-origin: right top;
}

.wrapper.center-right .text-button {
  width: fit-content;
  min-width: auto;
  display: flex;
  align-items: center;
  justify-content: center;
}

.wrapper.center-right .text-button .text {
  writing-mode: vertical-rl;
  -webkit-writing-mode: vertical-rl;
  text-orientation: mixed;
  padding: 8px 4px;
  margin: 0;
  max-height: 150px;
  overflow-y: auto;
}

.text-button,
.close-btn {
  border: solid 2px red;
  outline: none;
  box-sizing: border-box;
}

.text-button:focus,
.close-btn:focus  {
  color: blue;
  outline: none;
  border: blue solid 2px;
}

.text-button:focus .button-text {
  color: blue;
}