如何在Shiny应用中调整文本预览宽度、对齐方式及标题颜色
实现方案
你只需要做两处核心调整即可满足需求:
- 给「Project Description」对应的h2标签样式增加蓝色配置
- 给所有正文内容套一层外层容器控制宽度,同时修改文本对齐方式为两端对齐
完整修改后代码
library(shiny) library(tidyverse) ui <- shiny::navbarPage(title="Test", collapsible = TRUE, tabPanel("", br(), hr(), # 标题增加蓝色样式 h2(HTML("Project <b>Description</b>"), style="text-align:center; color: blue;"), hr(), # 外层div控制文本宽度、整体居中 div( style = "max-width: 800px; margin: 0 auto; padding: 0 15px;", h2(HTML("Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum"), style="text-align: justify;"), h2(HTML("Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum"), style="text-align: justify;") ) )) server <- function(input, output,session) { } shinyApp(ui = ui, server = server)
你可以根据需要调整max-width的数值,数值越大文本显示宽度越宽。
内容的提问来源于stack exchange,提问作者user16774617
相关产品推荐
相关产品推荐

