Question

我想看看是否可以在Shiny中将文字换行。我有一个闪亮的仪表板，带有“关于”选项卡，其中包含一些文本段落和一些图像。我在下面编写了该概念的简化版本。在像MS Word这样的程序中，对于图像如何与文本内联以及文本如何环绕图像有几种不同的选择（请参阅我在Word中创建的底部的图）。

我当前的解决方案是使用fluidRow（）和column（）将页面切碎并将文本与图像分开放置。这可能有效，但不能像Word的文字环绕功能那样提供最终产品的纯净度。

library(shiny)
library(shinydashboard)


ui <- dashboardPage(

  # # Dashboard Header
  dashboardHeader(title = "Menu"),
  #

  dashboardSidebar(
    sidebarMenu(
      menuItem("Example Tab", tabName = "tabA")
    )
  ), # End Dashboard Sidebar


  # Body of the dashboard
  dashboardBody(

    # Start with overall tabItems
    tabItems(
      tabItem(
        tabName = "tabA",


        fluidRow(
          column(
            width = 10,

            p("Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
          incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
          exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
          dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
          Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt
          mollit anim id est laborum."),
          ),
          column(
            width = 2,

            img(
              height = 100,

              src = "https://www.r-project.org/logo/Rlogo.png"
            ),
          ), # end column
        ), # end fluidRow

        br(),
        br(),

        fluidRow(
          column(
            width = 8,


            p("Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
          incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
          exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
          in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur
          sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est
          laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
          incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis
          nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
          Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu
          fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa
          qui officia deserunt mollit anim id est laborum.")
          ),

          column(
            width = 4,

            img(
              height = 200,

              src = "https://www.r-project.org/logo/Rlogo.png"
            ),
          ), # end column
        ), # end fluid row
      )
    )
  )
)



####################################################
####################################################

server <- function(input, output, session) {

}




shinyApp(ui = ui, server = server)

Answer 1

CSS方式：

library(shiny)
library(shinydashboard)

CSS <- "
p {
  line-height: 1.6; 
  font-family: Helvetica;
  text-align: justify;
  margin: 0;
  font-size: 14px;
}

.Rlogo {
  float: left;
  width: 250px;
  shape-outside: url(https://www.r-project.org/logo/Rlogo.svg);
  shape-margin: 20px;
  margin-right: 20px;
  margin-bottom: 20px;
}
"

ui <- dashboardPage(
  
  # # Dashboard Header
  dashboardHeader(title = "Menu"),
  #
  
  dashboardSidebar(
    sidebarMenu(
      menuItem("Example Tab", tabName = "tabA")
    )
  ), # End Dashboard Sidebar
  
  
  # Body of the dashboard
  dashboardBody(
    
    tags$head(
      tags$style(HTML(CSS))
    ),
    
    # Start with overall tabItems
    tabItems(
      tabItem(
        tabName = "tabA",
        
        fluidRow(
          column(
            width = 12,
            
            img(
              class = "Rlogo",
              src = "https://www.r-project.org/logo/Rlogo.svg"
            ),
            p("Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
          incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
          exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
          in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur
          sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est
          laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
          incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis
          nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
          Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu
          fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa
          qui officia deserunt mollit anim id est laborum.")
            
          ) # end column
          
        ) # end fluid row
      )
    )
  )
)


####################################################
####################################################

server <- function(input, output, session) {
  
}

shinyApp(ui = ui, server = server)

JavaScript方式：

CSS <- "
.Rlogo {
  float: left;
  width: 250px;
  padding: 30px;
}
"

JS <- "
$(document).ready(function(){
  $('.Rlogo').slickWrap();
});
" 

ui <- dashboardPage(
  
  # # Dashboard Header
  dashboardHeader(title = "Menu"),
  #
  
  dashboardSidebar(
    sidebarMenu(
      menuItem("Example Tab", tabName = "tabA")
    )
  ), # End Dashboard Sidebar
  
  
  # Body of the dashboard
  dashboardBody(
    
    tags$head(
      tags$script(src = "https://cdn.jsdelivr.net/gh/jasonwyatt/jQSlickWrap/jquery.slickwrap.js"),
      tags$script(HTML(JS)),
      tags$style(HTML(CSS))
    ),
    
    # Start with overall tabItems
    tabItems(
      tabItem(
        tabName = "tabA",
        
        fluidRow(
          column(
            width = 12,
            
            img(
              class = "Rlogo",
              src = "https://www.r-project.org/logo/Rlogo.svg"
            ),
            p("Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
          incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
          exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
          in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur
          sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est
          laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
          incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis
          nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
          Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu
          fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa
          qui officia deserunt mollit anim id est laborum.")
            
          ) # end column
          
        ) # end fluid row
      )
    )
  )
)


####################################################
####################################################

server <- function(input, output, session) {
  
}

shinyApp(ui = ui, server = server)

Answer 2

如果您以合理的css p为text-align样式设置，它应该可以工作

p(style="text-align: justify;", "Lorem ipsum etc etc")

我可以在Shiny中在图像周围包裹一段文字吗？

2 个答案: