如何将Shiny导航栏标签文字拆分为两行并居中？

要实现导航栏标签内两行文字居中，结合HTML换行标签和CSS样式调整即可完成，具体操作如下：

1. 单个标签页独立设置 #

直接在tabPanel的标题中用HTML包裹内容，通过<br>实现文字换行，同时添加text-align:center样式让文字居中：

gene_expressions_sign_tab <- shiny::tabPanel(
  title = HTML('<div style="text-align: center;">Gene<br>Expression</div>'),
  icon = icon("chart-line"),
  value = "Gene",
  wellPanel(
    fluidRow("etc")
  )
)

2. 全局统一设置所有标签 #

如果需要让所有导航栏标签都应用两行文字居中的样式，可在navbarPage中添加全局CSS规则：

ui <- navbarPage(
  "应用标题",
  # 全局设置导航栏标签文字居中
  tags$style(HTML("
    .nav-tabs>li>a {
      text-align: center;
      /* 可选：设置最小宽度，避免标签过窄导致文字挤压 */
      min-width: 100px;
    }
  ")),
  # 已定义的标签页
  gene_expressions_sign_tab,
  # 其他示例标签页
  shiny::tabPanel(
    title = HTML("Sample<br>Data"),
    icon = icon("table"),
    value = "Sample"
  )
)

关键说明 #

• <br>标签用于强制将文字拆分为两行
• text-align:center实现文字在标签容器内水平居中
• 可选的min-width属性可避免标签宽度过窄，优化文字排版效果

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