按钮容器文本无法横向显示，添加horizontal-tb仍无效求解决方案

以下是几个可行的解决思路，你可以逐一尝试：

1. 强制文本不换行 #

你的按钮宽高固定为60px，如果文本长度超过容器宽度，会自动换行导致看起来像竖向排列。可以添加white-space: nowrap;强制文本单行显示：

.backButton {
    display: flex;  
    justify-content: center;  
    align-items: center; 
    writing-mode: horizontal-tb; 
    white-space: nowrap; /* 新增 */
    position: fixed; 
    bottom: 20px; 
    right: 20px; 
    width: 60px !important; 
    height: 60px !important; 
    border-radius: 50%; 
    background-color: pink; 
    color: white;
    font-size: 16px; 
    z-index: 9999; 
}

如果文本过长，可适当缩小font-size或者增大容器宽高，避免文本溢出容器。

2. 检查父元素的CSS继承 #

writing-mode是可继承属性，如果按钮的父容器设置了vertical-rl或vertical-lr，即使你给按钮加了!important，也可能被父元素的样式影响。可以：

• 检查按钮所在父容器的CSS，确保没有设置竖向的writing-mode
• 给按钮内部的文本单独包裹一层<span>，并给这个span设置明确的横向属性：

<button class="backButton"><span>返回</span></button>

.backButton span {
    writing-mode: horizontal-tb;
    text-orientation: mixed; /* 确保文本方向正常 */
}

3. 排查冲突的CSS属性 #

检查是否有其他属性干扰文本排列，比如：

• 有没有设置direction: rtl（从右到左排列）
• 有没有给按钮或父元素加transform: rotate()旋转样式
• 有没有设置word-break: break-all强制断字

4. 简化布局属性 #

你同时使用了flex居中和text-align: center，其实flex的justify-content和align-items已经能实现文本居中，可移除text-align: center，避免潜在冲突。

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