页面大小更改时，tags $ div中的文本不会自动换行

Question

使用标签$ div，我试图在我的闪亮应用程序中添加简短注释（引文）。当页面大小更改时，注释不会自动换行。 这是代码：

tags$div(
            id = "cite",
            '2010 Data: 2010 U.S. Census Bureau (2011). Census Summary File 1 & Investigative Reporters and Editors, Inc. Census.Ire.org Online Database.',
            style = "color: black; font-size: 12px ; width: 220px;
            white-space: nowrap; overflow: visible"
          ),

我将可见选项更改为自动，滚动但存在问题。 最好， 纳德

Answer 1

您为什么使用white-space: nowrap和overflow: visible？

由于您的div的宽度也固定，因此它不受页面大小的影响。您必须使用%而不是px。我附加了边框，所以您现在就可以。如果要基于特定的宽度来中断文本，请使用"col-sm-4"之类的引导程序类或使用媒体查询。

library(shiny)
library(shinyWidgets)

ui <- fluidPage(

    uiOutput("static"),
    uiOutput("dynamic")


)

server <- function(input, output) {

    output$dynamic <- renderUI({
        tags$div(
            id = "cite",
            '2010 Data: 2010 U.S. Census Bureau (2011). Census Summary File 1 & Investigative Reporters and Editors, Inc. Census.Ire.org Online Database.',
            style = "color: black; font-size: 12px ; width: 25%;
            overflow-wrap: break-word; border:1px solid red;"
        )
    })

    output$static <- renderUI({
        tags$div(
            id = "cite2",
            '2010 Data: 2010 U.S. Census Bureau (2011). Census Summary File 1 & Investigative Reporters and Editors, Inc. Census.Ire.org Online Database.',
            style = "color: black; font-size: 12px ; width: 220px;
            white-space: nowrap; overflow: visible; border:1px solid red;"
        )
    })


}

shinyApp(ui, server)

Answer 2

以下是对我有用的代码：

while(Border.Width < 150)
{
      Border.Width += 4;
      System.Threading.Thread.Sleep(70);
}