word wrap in HTML for RShiny while keeping MathJax

Question

Suppose we have longtext.Rmd file that returns html to be displayed in RShiny using withMathJax(includeHTML("www/longtext.html"))

---
output: html_fragment
---

# **1. Heading**

long text looooooooooooooooongtext $\delta_{0}$

long text looooooooooooooooongtext long text looooooooooooooooongtext $\delta_{0}$$\delta_{0}$

long text looooooooooooooooongtext long text looooooooooooooooongtext long text looooooooooooooooongtext

long text looooooooooooooooongtext long text looooooooooooooooongtext long text looooooooooooooooongtext long text looooooooooooooooongtext long text looooooooooooooooongtext 



long text looooooooooooooooongtext long text looooooooooooooooongtext long text looooooooooooooooongtext long text looooooooooooooooongtext long text looooooooooooooooongtext long text looooooooooooooooongtext long text looooooooooooooooongtext long text looooooooooooooooongtext long text looooooooooooooooongtext long text looooooooooooooooongtext long text looooooooooooooooongtext long text looooooooooooooooongtext long text looooooooooooooooongtext long text looooooooooooooooongtext long text looooooooooooooooongtext long text looooooooooooooooongtext long text looooooooooooooooongtext long text looooooooooooooooongtext long text looooooooooooooooongtext long text looooooooooooooooongtext long text looooooooooooooooongtext long text looooooooooooooooongtext long text looooooooooooooooongtext long text looooooooooooooooongtext long text looooooooooooooooongtext long text looooooooooooooooongtext long text looooooooooooooooongtext long text looooooooooooooooongtext long text looooooooooooooooongtext long text looooooooooooooooongtext long text looooooooooooooooongtext long text looooooooooooooooongtext long text looooooooooooooooongtext long text looooooooooooooooongtext long text looooooooooooooooongtext long text looooooooooooooooongtext long text looooooooooooooooongtext long text looooooooooooooooongtext long text looooooooooooooooongtext long text looooooooooooooooongtext 

And the UI for Rshiny below:

tabPanel(title = "Panel 1",
         fluidRow(
           wellPanel(

             #attempt1: create x-scroll and does not wrap
             withMathJax(includeHTML("www/longtext.html"))

             #attempt2: wraps, but does not evaluate math equation
             withMathJax(tags$iframe(src = './longtext.html',
                                     width = '100%', height = '800px',
                                     frameborder = 0, scrolling = 'auto'
             ))

             #attempt3: create x-scroll and does not wrap
             column(12,
                    (div(style=
                           'width:100%;
                            height:800px;
                            overflow-y: scroll;
                            word-break: break-all;
                            overflow-wrap: break-word;
                            word-wrap: break-word;',
                         withMathJax(includeHTML("www/longtext.html"))
                    ))
             )
           )
         )
)

First attempt, simple withMathJax(includeHTML()), does not wrap the long text, i.e., last paragraph is a single line that overflows wellPanel().

Second attempt, using tags$iframe fails to evaluate the MathJax.

Third attempt, using div within column, returns same outcome as the first attempt.

What would be the proper way to display the longtext, in a way that it will be wrapped properly to account for the window size of the user?

Answer 1

"white-space: normal;"

in the global setting