Текст в тегах $ 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

Вот код, который работал для меня:

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: 100%;
   white-space: pre-line"
    ),