Tweak word-wrap rule to prevent long words becoming scrollburglars (#…

…1888)

Co-authored-by: Hadley Wickham <[email protected]>

NEWS.md

@@ -1,5 +1,6 @@
 # pkgdown (development version)
 
+* Very wide words are now automatically broken across lines and hyphenated (when possible) when they'd otherwise create a horizontal scrollbar on mobile (#1888).
 * The `repo.source.url` field no longer requires a trailing slash (#2017).
 * Anywhere you can use `_pkgdown.yml`, you can now use `_pkgdown.yaml` (#2244).
 * pkgdown no longer overrides the default selection colours. This improves accessibility for users who have set their own colours in their browser settings (#2139, @glin).

inst/BS5/assets/pkgdown.scss

@@ -1,8 +1,12 @@
 /* control page width ====================================================== */
 
-// Ensure contents never become unreadably wide
 .row > main {
+  // Ensure contents never become unreadably wide
   max-width: 50rem;
+
+  // And that we can break and hypenate very long words
+  overflow-wrap: break-word;
+  hyphens: auto;
 }
 // Put extra space between content and navbar
 @include media-breakpoint-only(xl) {

vignettes/test/rendering.Rmd

@@ -198,3 +198,9 @@ Guten tag.
 #### Heading 4
 
 ##### Heading 5
+
+## Very long words
+
+This word should be broken across multiple lines on mobile, rather than making the page scroll horizontally:
+
+Ccccccccccccaaaaaaaaaaaaaaatttttttttttttttttssssssssssssssss