Html valueBox仪表板：自定义格式

我正在一个闪亮的仪表板上工作，并使用ValueBox显示当前的KPI。但我注意到的是，根据文本的长度，它会拉长框以适合文本，然后会扭曲外观

如何使文本始终只在一行上（即，将字体更改为框的宽度），而不管屏幕大小如何

此外，如果您有任何HTML或CSS指针，使信息在一个更好的布局，让我知道

我必须展示：

• 价值观
• 值表示的内容的描述
• 对未来的估计 价值观

在我的实际仪表板中：

• 我改变了盒子的背景颜色
• 磨圆边缘
• 根据阈值更改字体颜色值

代码：

ui
ui <- dashboardPage(
  dashboardHeader(title = "Dynamic boxes"),
  dashboardSidebar(),
  dashboardBody(
    fluidRow(
      valueBoxOutput("vbox", width = 2),
      valueBoxOutput("vbox2", width = 2),
      valueBoxOutput("vbox3", width = 2),
      valueBoxOutput("vbox4", width = 2),
      valueBoxOutput("vbox5", width = 2),
      valueBoxOutput("vbox6", width = 2)
    )
  )
)

server <- function(input, output) {
  output$vbox <- renderValueBox({
    valueBox(
      "55%",
      HTML(paste("test_value that is super long like this",br(),"Estimated: 98%")),
      icon = icon("credit-card")
    )
  })
  output$vbox2 <- renderValueBox({
    valueBox(
      "70%",
      HTML(paste("this one is just as long, maybe even longer",br(),"Estimated: 100%")),
      icon = icon("credit-card")
    )
  })
  output$vbox3 <- renderValueBox({
    valueBox(
      "80%",
      HTML(paste("this one is short",br(),"Estimated: 50%")),
      icon = icon("credit-card")
    )
  })
  output$vbox4 <- renderValueBox({
    valueBox(
      "100%",
      HTML(paste("medium length like here",br(),"Estimated: 95%")),
      icon = icon("credit-card")
    )
  })
  output$vbox5 <- renderValueBox({
    valueBox(
      "90%",
      HTML(paste("test_value that is super long like this",br(),"Estimated: 80%")),
      icon = icon("credit-card")
    )
  })
  output$vbox6 <- renderValueBox({
    valueBox(
      "40%",
      HTML(paste("test_value that is super long like this",br(),"Estimated: 70%")),
      icon = icon("credit-card")
    )
  })
}

shinyApp(ui, server)
}