CSS: Add overflow-wrap to links inside paragraphs (#1193)

* Add overflow-wrap to links inside paragraphs * Add regression test for very long URLs * Build theme.css for #1193 * build theme.css for #1193 * Build theme.css for #1193 Co-authored-by: Benjamin Bach <benjamin@overtag.dk>
readthedocs · Aug 27, 2022 · ba0dc62 · ba0dc62
1 parent 918ca5b
commit ba0dc62
Show file tree

Hide file tree

Showing 3 changed files with 8 additions and 1 deletion.
diff --git a/docs/demo/demo.rst b/docs/demo/demo.rst
@@ -51,6 +51,10 @@ should    be grouped    in pairs).``
 
 If the ``--pep-references`` option was supplied, there should be a live link to PEP 258 here.
 
+.. regression test for https://github.com/readthedocs/sphinx_rtd_theme/pull/1193
+
+Very long URLs should be wrapped so lines do not overflow and cause horizontal scrolling: https://www.google.com/search?hl=en&q=very%20long%20url%20example%20of%20a%20url%20that%20is%20extremely%20long%20you%20probably%20want%20to%20avoid%20it%20but%20here%20we%20are
+
 Math
 ====
 

diff --git a/sphinx_rtd_theme/static/css/theme.css b/sphinx_rtd_theme/static/css/theme.css
diff --git a/src/sass/_theme_rst.sass b/src/sass/_theme_rst.sass
@@ -225,6 +225,9 @@
     &:hover .headerlink
       opacity: 1
 
+  // Make links inside paragraphs wrap when they are too long
+  p a
+    overflow-wrap: anywhere
   // Consistent font sizing for table typography
   .wy-table
     th, td