如何将flex布局的按钮文本改为直行？随机语录项目技术问询

为什么文本处于flex布局？ #

你的按钮或其父元素大概率被设置了display: flex样式，flex布局默认是横向排列元素，所以按钮内的文本会按横向分布，无法呈现直行效果。

具体修复方案 #

• 方案1：调整flex布局方向
  如果需要保留flex布局，给按钮设置垂直方向的flex排列：

  .your-button-class {
    display: flex;
    flex-direction: column; /* 让元素垂直直行排列 */
    align-items: center; /* 可选：文本居中 */
  }
  

• 方案2：脱离flex布局，用文本垂直排列属性
  不需要flex的话，移除按钮的display: flex，改用writing-mode实现文本直行：

  .your-button-class {
    display: block;
    writing-mode: vertical-rl; /* 从右到左垂直直行 */
    text-orientation: upright; /* 保持文本正立 */
  }
  

• 方案3：解决父元素flex的影响
  如果是父元素的flex布局导致按钮内文本异常，给按钮设置独立的显示方式：

  .your-button-class {
    display: inline-block; /* 脱离父元素flex的横向排列控制 */
    white-space: nowrap; /* 可选：防止文本换行 */
  }
  

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