From 599f88d7717aca793e81c68e66f91b5b9be2d732 Mon Sep 17 00:00:00 2001
From: Guillaume Gomez <guillaume1.gomez@gmail.com>
Date: Thu, 13 Feb 2025 17:39:05 +0100
Subject: [PATCH 1/4] Add new setting to wrap source code lines when too long

---
 src/librustdoc/html/static/css/rustdoc.css | 107 +++++++++++++--------
 src/librustdoc/html/static/js/main.js      |  37 ++++---
 src/librustdoc/html/static/js/settings.js  |  13 +++
 src/librustdoc/html/static/js/storage.js   |   3 +
 4 files changed, 99 insertions(+), 61 deletions(-)

diff --git a/src/librustdoc/html/static/css/rustdoc.css b/src/librustdoc/html/static/css/rustdoc.css
index 4f5f8f92264c1..8e904c6200e6f 100644
--- a/src/librustdoc/html/static/css/rustdoc.css
+++ b/src/librustdoc/html/static/css/rustdoc.css
@@ -41,6 +41,7 @@ xmlns="http://www.w3.org/2000/svg" fill="black" height="18px">\
 	--font-family: "Source Serif 4", NanumBarunGothic, serif;
 	--font-family-code: "Source Code Pro", monospace;
 	--line-number-padding: 4px;
+	--line-number-right-margin: 20px;
 	/* scraped examples icons (34x33px) */
 	--prev-arrow-image: url('data:image/svg+xml,<svg width="16" height="16" viewBox="0 0 16 16" \
 	enable-background="new 0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path fill="none" \
@@ -848,22 +849,6 @@ ul.block, .block li, .block ul {
 	border-radius: 6px;
 }
 
-/*
-If the code example line numbers are displayed, there will be a weird radius in the middle from
-both the code example and the line numbers, so we need to remove the radius in this case.
-*/
-.rustdoc .example-wrap > .example-line-numbers,
-.rustdoc .scraped-example .src-line-numbers,
-.rustdoc .scraped-example .src-line-numbers > pre {
-	border-top-right-radius: 0;
-	border-bottom-right-radius: 0;
-}
-.rustdoc .example-wrap > .example-line-numbers + pre,
-.rustdoc .scraped-example .rust {
-	border-top-left-radius: 0;
-	border-bottom-left-radius: 0;
-}
-
 .rustdoc .scraped-example {
 	position: relative;
 }
@@ -908,45 +893,31 @@ both the code example and the line numbers, so we need to remove the radius in t
 	overflow: auto;
 }
 
-.rustdoc .example-wrap pre.example-line-numbers,
-.rustdoc .example-wrap .src-line-numbers {
-	min-width: fit-content; /* prevent collapsing into nothing in truncated scraped examples */
-	flex-grow: 0;
-	text-align: right;
-	-moz-user-select: none;
-	-webkit-user-select: none;
-	-ms-user-select: none;
-	user-select: none;
-	padding: 14px 8px;
-	padding-right: 2px;
-	color: var(--src-line-numbers-span-color);
-}
-
-.example-wrap.digits-1 [data-nosnippet] {
+.example-wrap.digits-1:not(.hide-lines) [data-nosnippet] {
 	width: calc(1ch + var(--line-number-padding) * 2);
 }
-.example-wrap.digits-2 [data-nosnippet] {
+.example-wrap.digits-2:not(.hide-lines) [data-nosnippet] {
 	width: calc(2ch + var(--line-number-padding) * 2);
 }
-.example-wrap.digits-3 [data-nosnippet] {
+.example-wrap.digits-3:not(.hide-lines) [data-nosnippet] {
 	width: calc(3ch + var(--line-number-padding) * 2);
 }
-.example-wrap.digits-4 [data-nosnippet] {
+.example-wrap.digits-4:not(.hide-lines) [data-nosnippet] {
 	width: calc(4ch + var(--line-number-padding) * 2);
 }
-.example-wrap.digits-5 [data-nosnippet] {
+.example-wrap.digits-5:not(.hide-lines) [data-nosnippet] {
 	width: calc(5ch + var(--line-number-padding) * 2);
 }
-.example-wrap.digits-6 [data-nosnippet] {
+.example-wrap.digits-6:not(.hide-lines) [data-nosnippet] {
 	width: calc(6ch + var(--line-number-padding) * 2);
 }
-.example-wrap.digits-7 [data-nosnippet] {
+.example-wrap.digits-7:not(.hide-lines) [data-nosnippet] {
 	width: calc(7ch + var(--line-number-padding) * 2);
 }
-.example-wrap.digits-8 [data-nosnippet] {
+.example-wrap.digits-8:not(.hide-lines) [data-nosnippet] {
 	width: calc(8ch + var(--line-number-padding) * 2);
 }
-.example-wrap.digits-9 [data-nosnippet] {
+.example-wrap.digits-9:not(.hide-lines) [data-nosnippet] {
 	width: calc(9ch + var(--line-number-padding) * 2);
 }
 
@@ -954,12 +925,12 @@ both the code example and the line numbers, so we need to remove the radius in t
 	color: var(--src-line-numbers-span-color);
 	text-align: right;
 	display: inline-block;
-	margin-right: 20px;
+	margin-right: var(--line-number-right-margin);
 	-moz-user-select: none;
 	-webkit-user-select: none;
 	-ms-user-select: none;
 	user-select: none;
-	padding: 0 4px;
+	padding: 0 var(--line-number-padding);
 }
 .example-wrap [data-nosnippet]:target {
 	border-right: none;
@@ -967,6 +938,60 @@ both the code example and the line numbers, so we need to remove the radius in t
 .example-wrap .line-highlighted[data-nosnippet] {
 	background-color: var(--src-line-number-highlighted-background-color);
 }
+:root.wrap-source-code .example-wrap [data-nosnippet] {
+	position: absolute;
+	left: 0;
+}
+.wrap-source-code .example-wrap pre > code {
+	position: relative;
+	word-break: break-all;
+}
+:root.wrap-source-code .example-wrap pre > code {
+	display: block;
+	white-space: pre-wrap;
+}
+:root.wrap-source-code .example-wrap pre > code * {
+	word-break: break-all;
+}
+:root.wrap-source-code .example-wrap.digits-1 pre > code {
+	padding-left: calc(
+		1ch + var(--line-number-padding) * 2 + var(--line-number-right-margin));
+}
+:root.wrap-source-code .example-wrap.digits-2 pre > code {
+	padding-left: calc(
+		2ch + var(--line-number-padding) * 2 + var(--line-number-right-margin));
+}
+:root.wrap-source-code .example-wrap.digits-3 pre > code {
+	padding-left: calc(
+		3ch + var(--line-number-padding) * 2 + var(--line-number-right-margin));
+}
+:root.wrap-source-code .example-wrap.digits-4 pre > code {
+	padding-left: calc(
+		4ch + var(--line-number-padding) * 2 + var(--line-number-right-margin));
+}
+:root.wrap-source-code .example-wrap.digits-5 pre > code {
+	padding-left: calc(
+		5ch + var(--line-number-padding) * 2 + var(--line-number-right-margin));
+}
+:root.wrap-source-code .example-wrap.digits-6 pre > code {
+	padding-left: calc(
+		6ch + var(--line-number-padding) * 2 + var(--line-number-right-margin));
+}
+:root.wrap-source-code .example-wrap.digits-7 pre > code {
+	padding-left: calc(
+		7ch + var(--line-number-padding) * 2 + var(--line-number-right-margin));
+}
+:root.wrap-source-code .example-wrap.digits-8 pre > code {
+	padding-left: calc(
+		8ch + var(--line-number-padding) * 2 + var(--line-number-right-margin));
+}
+:root.wrap-source-code .example-wrap.digits-9 pre > code {
+	padding-left: calc(
+		9ch + var(--line-number-padding) * 2 + var(--line-number-right-margin));
+}
+.example-wrap.hide-lines [data-nosnippet] {
+	display: none;
+}
 
 .search-loading {
 	text-align: center;
diff --git a/src/librustdoc/html/static/js/main.js b/src/librustdoc/html/static/js/main.js
index a348c6c5678b9..67cc48f4cb26e 100644
--- a/src/librustdoc/html/static/js/main.js
+++ b/src/librustdoc/html/static/js/main.js
@@ -1112,35 +1112,32 @@ function preLoadCss(cssUrl) {
 
     // @ts-expect-error
     window.rustdoc_add_line_numbers_to_examples = () => {
-        if (document.querySelector(".rustdoc.src")) {
-            // We are in the source code page, nothing to be done here!
-            return;
+        // @ts-expect-error
+        function generateLine(nb) {
+            return `<span data-nosnippet>${nb}</span>`;
         }
+
         onEachLazy(document.querySelectorAll(
-            ":not(.scraped-example) > .example-wrap > pre:not(.example-line-numbers)",
-        ), x => {
-            const parent = x.parentNode;
-            const line_numbers = parent.querySelectorAll(".example-line-numbers");
-            if (line_numbers.length > 0) {
+            ".rustdoc:not(.src) :not(.scraped-example) > .example-wrap > pre > code",
+        ), code => {
+            if (hasClass(code.parentElement.parentElement, "hide-lines")) {
+                removeClass(code.parentElement.parentElement, "hide-lines");
                 return;
             }
-            const count = x.textContent.split("\n").length;
-            const elems = [];
-            for (let i = 0; i < count; ++i) {
-                elems.push(i + 1);
-            }
-            const node = document.createElement("pre");
-            addClass(node, "example-line-numbers");
-            node.innerHTML = elems.join("\n");
-            parent.insertBefore(node, x);
+            const lines = code.innerHTML.split("\n");
+            const digits = (lines.length + "").length;
+            // @ts-expect-error
+            code.innerHTML = lines.map((line, index) => generateLine(index + 1) + line).join("\n");
+            addClass(code.parentElement.parentElement, `digits-${digits}`);
         });
     };
 
     // @ts-expect-error
     window.rustdoc_remove_line_numbers_from_examples = () => {
-        onEachLazy(document.querySelectorAll(".example-wrap > .example-line-numbers"), x => {
-            x.parentNode.removeChild(x);
-        });
+        onEachLazy(
+            document.querySelectorAll(".rustdoc:not(.src) :not(.scraped-example) > .example-wrap"),
+            x => addClass(x, "hide-lines"),
+        );
     };
 
     if (getSettingValue("line-numbers") === "true") {
diff --git a/src/librustdoc/html/static/js/settings.js b/src/librustdoc/html/static/js/settings.js
index bf33e0f17e5fe..2cf6d6fde8f1a 100644
--- a/src/librustdoc/html/static/js/settings.js
+++ b/src/librustdoc/html/static/js/settings.js
@@ -59,6 +59,14 @@
                 } else {
                     removeClass(document.documentElement, "sans-serif");
                 }
+                break;
+            case "wrap-source-code":
+                if (value === true) {
+                    addClass(document.documentElement, "wrap-source-code");
+                } else {
+                    removeClass(document.documentElement, "wrap-source-code");
+                }
+                break;
         }
     }
 
@@ -246,6 +254,11 @@
                 "js_name": "sans-serif-fonts",
                 "default": false,
             },
+            {
+                "name": "Wrap source codes",
+                "js_name": "wrap-source-code",
+                "default": false,
+            },
         ];
 
         // Then we build the DOM.
diff --git a/src/librustdoc/html/static/js/storage.js b/src/librustdoc/html/static/js/storage.js
index 3042373fb096f..4f70166848c34 100644
--- a/src/librustdoc/html/static/js/storage.js
+++ b/src/librustdoc/html/static/js/storage.js
@@ -286,6 +286,9 @@ if (getSettingValue("hide-modnav") === "true") {
 if (getSettingValue("sans-serif-fonts") === "true") {
     addClass(document.documentElement, "sans-serif");
 }
+if (getSettingValue("wrap-source-code") === "true") {
+    addClass(document.documentElement, "wrap-source-code");
+}
 function updateSidebarWidth() {
     const desktopSidebarWidth = getSettingValue("desktop-sidebar-width");
     if (desktopSidebarWidth && desktopSidebarWidth !== "null") {

From 10d666f3d6d42e5a65e295551ccff51ac9b0d91a Mon Sep 17 00:00:00 2001
From: Guillaume Gomez <guillaume1.gomez@gmail.com>
Date: Thu, 13 Feb 2025 22:44:30 +0100
Subject: [PATCH 2/4] Update rustdoc-gui test

---
 .../docblock-code-block-line-number.goml      | 68 +++++--------------
 1 file changed, 16 insertions(+), 52 deletions(-)

diff --git a/tests/rustdoc-gui/docblock-code-block-line-number.goml b/tests/rustdoc-gui/docblock-code-block-line-number.goml
index 032746a6bdf44..97273ceb195fa 100644
--- a/tests/rustdoc-gui/docblock-code-block-line-number.goml
+++ b/tests/rustdoc-gui/docblock-code-block-line-number.goml
@@ -21,7 +21,7 @@ assert-css: (
 set-local-storage: {"rustdoc-line-numbers": "true"}
 reload:
 // We wait for the line numbers to be added into the DOM by the JS...
-wait-for: "pre.example-line-numbers"
+wait-for: ".digits-1 pre"
 
 // Otherwise, we can't check text color
 show-text: true
@@ -35,30 +35,21 @@ define-function: (
         call-function: ("switch-theme", {"theme": |theme|})
         // If the test didn't fail, it means that it was found!
         assert-css: (
-            "pre.example-line-numbers",
+            ".digits-1 pre [data-nosnippet]",
             {
                 "color": |color|,
-                "margin": "0px",
-                "padding-top": "14px",
-                "padding-bottom": "14px",
-                "padding-left": "8px",
-                "padding-right": "2px",
+                "margin-top": "0px",
+                "margin-bottom": "0px",
+                "margin-left": "0px",
+                "margin-right": "20px",
+                "padding-top": "0px",
+                "padding-bottom": "0px",
+                "padding-left": "4px",
+                "padding-right": "4px",
                 "text-align": "right",
-                // There should not be a radius on the right of the line numbers.
-                "border-top-left-radius": "6px",
-                "border-bottom-left-radius": "6px",
-                "border-top-right-radius": "0px",
-                "border-bottom-right-radius": "0px",
             },
             ALL,
         )
-        // There should not be a radius on the left of the line numbers.
-        assert-css: ("pre.example-line-numbers + .rust", {
-            "border-top-left-radius": "0px",
-            "border-bottom-left-radius": "0px",
-            "border-top-right-radius": "6px",
-            "border-bottom-right-radius": "6px",
-        })
     },
 )
 call-function: ("check-colors", {
@@ -74,9 +65,6 @@ call-function: ("check-colors", {
     "color": "#c67e2d",
 })
 
-// The first code block has two lines so let's check its `<pre>` elements lists both of them.
-assert-text: ("pre.example-line-numbers", "1\n2")
-
 // Now, try changing the setting dynamically. We'll turn it off, using the settings menu,
 // and make sure it goes away.
 
@@ -87,42 +75,17 @@ assert-css: ("#settings", {"display": "block"})
 
 // Then, click the toggle button.
 click: "input#line-numbers"
-wait-for-false: "pre.example-line-numbers"
+wait-for: ".digits-1.hide-lines"
 assert-local-storage: {"rustdoc-line-numbers": "false" }
 
-// Check that the rounded corners are back.
-assert-css: (
-    ".example-wrap .rust",
-    {
-        "border-top-left-radius": "6px",
-        "border-bottom-left-radius": "6px",
-        "border-top-right-radius": "6px",
-        "border-bottom-right-radius": "6px",
-    },
-    ALL,
-)
-
 // Finally, turn it on again.
 click: "input#line-numbers"
-wait-for: "pre.example-line-numbers"
+wait-for: ".digits-1:not(.hide-lines)"
 assert-local-storage: {"rustdoc-line-numbers": "true" }
-wait-for: "pre.example-line-numbers"
 
 // Same check with scraped examples line numbers.
 go-to: "file://" + |DOC_PATH| + "/scrape_examples/fn.test_many.html"
 
-assert-css: (
-    ".scraped-example .rust",
-    {
-        // There should not be a radius on the left of the code.
-        "border-top-left-radius": "0px",
-        "border-bottom-left-radius": "0px",
-        "border-top-right-radius": "6px",
-        "border-bottom-right-radius": "6px",
-    },
-    ALL,
-)
-
 define-function: (
     "check-padding",
     [path, padding_bottom],
@@ -203,17 +166,18 @@ assert-local-storage: {"rustdoc-line-numbers": "true" }
 assert: ".example-wrap > pre.language-txt"
 assert: ".example-wrap > pre.rust"
 assert-count: (".example-wrap", 2)
-assert-count: (".example-wrap > pre.example-line-numbers", 2)
+assert-count: (".example-wrap.digits-1", 2)
 
 click: "#settings-menu"
 wait-for: "#settings"
 
 // Then, click the toggle button.
 click: "input#line-numbers"
-wait-for-count: (".example-wrap > pre.example-line-numbers", 0)
+wait-for-count: (".example-wrap.digits-1.hide-lines", 2)
 assert-local-storage-false: {"rustdoc-line-numbers": "true" }
 
 // Now turning off the setting.
 click: "input#line-numbers"
-wait-for-count: (".example-wrap > pre.example-line-numbers", 2)
+wait-for-count: (".example-wrap.digits-1", 2)
+wait-for-count: (".example-wrap.digits-1.hide-lines", 0)
 assert-local-storage: {"rustdoc-line-numbers": "true" }

From 38b5bfce24834457cb3f2f1ccb8ed7cd5c29144b Mon Sep 17 00:00:00 2001
From: Guillaume Gomez <guillaume1.gomez@gmail.com>
Date: Thu, 13 Feb 2025 23:03:34 +0100
Subject: [PATCH 3/4] Add GUI test for code wrapping

---
 tests/rustdoc-gui/source-code-wrapping.goml | 44 +++++++++++++++++++++
 tests/rustdoc-gui/src/test_docs/lib.rs      |  9 +++++
 2 files changed, 53 insertions(+)
 create mode 100644 tests/rustdoc-gui/source-code-wrapping.goml

diff --git a/tests/rustdoc-gui/source-code-wrapping.goml b/tests/rustdoc-gui/source-code-wrapping.goml
new file mode 100644
index 0000000000000..6b70c4c3447c7
--- /dev/null
+++ b/tests/rustdoc-gui/source-code-wrapping.goml
@@ -0,0 +1,44 @@
+// Checks that the interactions with the source code pages are working as expected.
+go-to: "file://" + |DOC_PATH| + "/src/test_docs/lib.rs.html"
+show-text: true
+
+define-function: (
+    "click-code-wrapping",
+    [expected],
+    block {
+        click: "#wrap-source-code"
+        wait-for-local-storage: {"rustdoc-wrap-source-code": |expected|}
+    },
+)
+
+store-size: (".rust code", {"width": width, "height": height})
+click: "#settings-menu"
+wait-for: "#settings"
+call-function: ("click-code-wrapping", {"expected": "true"})
+store-size: (".rust code", {"width": new_width, "height": new_height})
+// The width should now be smaller than the window's and the height
+// should have increased.
+assert: |width| > |new_width| && |height| < |new_height|
+
+// Switching back to the original setting.
+call-function: ("click-code-wrapping", {"expected": "false"})
+assert-size: (".rust code", {"width": |width|, "height": |height|})
+
+// Now let's check in docs code examples.
+go-to: "file://" + |DOC_PATH| + "/test_docs/trait_bounds/index.html"
+click: "#settings-menu"
+wait-for: "#settings"
+
+store-size: (".example-wrap .rust code", {"width": rust_width, "height": rust_height})
+store-size: (".example-wrap .language-text code", {"width": txt_width, "height": txt_height})
+call-function: ("click-code-wrapping", {"expected": "true"})
+
+store-size: (".example-wrap .rust code", {"width": new_rust_width, "height": new_rust_height})
+store-size: (".example-wrap .language-text code", {"width": new_txt_width, "height": new_txt_height})
+
+assert: |rust_width| > |new_rust_width| && |rust_height| < |new_rust_height|
+assert: |txt_width| > |new_txt_width| && |txt_height| < |new_txt_height|
+
+call-function: ("click-code-wrapping", {"expected": "false"})
+assert-size: (".example-wrap .rust code", {"width": |rust_width|, "height": |rust_height|})
+assert-size: (".example-wrap .language-text code", {"width": |txt_width|, "height": |txt_height|})
diff --git a/tests/rustdoc-gui/src/test_docs/lib.rs b/tests/rustdoc-gui/src/test_docs/lib.rs
index 1a9ffbe889851..9cd28c1b4ffbe 100644
--- a/tests/rustdoc-gui/src/test_docs/lib.rs
+++ b/tests/rustdoc-gui/src/test_docs/lib.rs
@@ -615,6 +615,15 @@ pub mod private {
     }
 }
 
+/// ```
+/// fn super_long_function_name_because_i_need_to_hit_the_limit_and_break_beyond_it() {
+/// }
+/// ```
+///
+/// ```text
+/// fn super_long_function_name_because_i_need_to_hit_the_limit_and_break_beyond_it_v2() {
+/// }
+/// ```
 pub mod trait_bounds {
     pub trait OneBound: Sized {}
     pub trait TwoBounds: Sized + Copy {}

From a1471f3aa68ad97fc809e37c3c2c7b8b9e2ae227 Mon Sep 17 00:00:00 2001
From: Guillaume Gomez <guillaume1.gomez@gmail.com>
Date: Sun, 16 Feb 2025 00:34:29 +0100
Subject: [PATCH 4/4] Rename feature into `Word wrap source code`

---
 src/librustdoc/html/static/css/rustdoc.css  | 26 ++++++++++-----------
 src/librustdoc/html/static/js/settings.js   | 10 ++++----
 src/librustdoc/html/static/js/storage.js    |  4 ++--
 tests/rustdoc-gui/source-code-wrapping.goml |  9 ++++---
 4 files changed, 26 insertions(+), 23 deletions(-)

diff --git a/src/librustdoc/html/static/css/rustdoc.css b/src/librustdoc/html/static/css/rustdoc.css
index 8e904c6200e6f..0ea4d8f1e3914 100644
--- a/src/librustdoc/html/static/css/rustdoc.css
+++ b/src/librustdoc/html/static/css/rustdoc.css
@@ -938,54 +938,54 @@ ul.block, .block li, .block ul {
 .example-wrap .line-highlighted[data-nosnippet] {
 	background-color: var(--src-line-number-highlighted-background-color);
 }
-:root.wrap-source-code .example-wrap [data-nosnippet] {
+:root.word-wrap-source-code .example-wrap [data-nosnippet] {
 	position: absolute;
 	left: 0;
 }
-.wrap-source-code .example-wrap pre > code {
+.word-wrap-source-code .example-wrap pre > code {
 	position: relative;
 	word-break: break-all;
 }
-:root.wrap-source-code .example-wrap pre > code {
+:root.word-wrap-source-code .example-wrap pre > code {
 	display: block;
 	white-space: pre-wrap;
 }
-:root.wrap-source-code .example-wrap pre > code * {
+:root.word-wrap-source-code .example-wrap pre > code * {
 	word-break: break-all;
 }
-:root.wrap-source-code .example-wrap.digits-1 pre > code {
+:root.word-wrap-source-code .example-wrap.digits-1 pre > code {
 	padding-left: calc(
 		1ch + var(--line-number-padding) * 2 + var(--line-number-right-margin));
 }
-:root.wrap-source-code .example-wrap.digits-2 pre > code {
+:root.word-wrap-source-code .example-wrap.digits-2 pre > code {
 	padding-left: calc(
 		2ch + var(--line-number-padding) * 2 + var(--line-number-right-margin));
 }
-:root.wrap-source-code .example-wrap.digits-3 pre > code {
+:root.word-wrap-source-code .example-wrap.digits-3 pre > code {
 	padding-left: calc(
 		3ch + var(--line-number-padding) * 2 + var(--line-number-right-margin));
 }
-:root.wrap-source-code .example-wrap.digits-4 pre > code {
+:root.word-wrap-source-code .example-wrap.digits-4 pre > code {
 	padding-left: calc(
 		4ch + var(--line-number-padding) * 2 + var(--line-number-right-margin));
 }
-:root.wrap-source-code .example-wrap.digits-5 pre > code {
+:root.word-wrap-source-code .example-wrap.digits-5 pre > code {
 	padding-left: calc(
 		5ch + var(--line-number-padding) * 2 + var(--line-number-right-margin));
 }
-:root.wrap-source-code .example-wrap.digits-6 pre > code {
+:root.word-wrap-source-code .example-wrap.digits-6 pre > code {
 	padding-left: calc(
 		6ch + var(--line-number-padding) * 2 + var(--line-number-right-margin));
 }
-:root.wrap-source-code .example-wrap.digits-7 pre > code {
+:root.word-wrap-source-code .example-wrap.digits-7 pre > code {
 	padding-left: calc(
 		7ch + var(--line-number-padding) * 2 + var(--line-number-right-margin));
 }
-:root.wrap-source-code .example-wrap.digits-8 pre > code {
+:root.word-wrap-source-code .example-wrap.digits-8 pre > code {
 	padding-left: calc(
 		8ch + var(--line-number-padding) * 2 + var(--line-number-right-margin));
 }
-:root.wrap-source-code .example-wrap.digits-9 pre > code {
+:root.word-wrap-source-code .example-wrap.digits-9 pre > code {
 	padding-left: calc(
 		9ch + var(--line-number-padding) * 2 + var(--line-number-right-margin));
 }
diff --git a/src/librustdoc/html/static/js/settings.js b/src/librustdoc/html/static/js/settings.js
index 2cf6d6fde8f1a..5f1bbd27328cb 100644
--- a/src/librustdoc/html/static/js/settings.js
+++ b/src/librustdoc/html/static/js/settings.js
@@ -60,11 +60,11 @@
                     removeClass(document.documentElement, "sans-serif");
                 }
                 break;
-            case "wrap-source-code":
+            case "word-wrap-source-code":
                 if (value === true) {
-                    addClass(document.documentElement, "wrap-source-code");
+                    addClass(document.documentElement, "word-wrap-source-code");
                 } else {
-                    removeClass(document.documentElement, "wrap-source-code");
+                    removeClass(document.documentElement, "word-wrap-source-code");
                 }
                 break;
         }
@@ -255,8 +255,8 @@
                 "default": false,
             },
             {
-                "name": "Wrap source codes",
-                "js_name": "wrap-source-code",
+                "name": "Word wrap source code",
+                "js_name": "word-wrap-source-code",
                 "default": false,
             },
         ];
diff --git a/src/librustdoc/html/static/js/storage.js b/src/librustdoc/html/static/js/storage.js
index 4f70166848c34..425b915b5f94e 100644
--- a/src/librustdoc/html/static/js/storage.js
+++ b/src/librustdoc/html/static/js/storage.js
@@ -286,8 +286,8 @@ if (getSettingValue("hide-modnav") === "true") {
 if (getSettingValue("sans-serif-fonts") === "true") {
     addClass(document.documentElement, "sans-serif");
 }
-if (getSettingValue("wrap-source-code") === "true") {
-    addClass(document.documentElement, "wrap-source-code");
+if (getSettingValue("word-wrap-source-code") === "true") {
+    addClass(document.documentElement, "word-wrap-source-code");
 }
 function updateSidebarWidth() {
     const desktopSidebarWidth = getSettingValue("desktop-sidebar-width");
diff --git a/tests/rustdoc-gui/source-code-wrapping.goml b/tests/rustdoc-gui/source-code-wrapping.goml
index 6b70c4c3447c7..cb2fd3052cdac 100644
--- a/tests/rustdoc-gui/source-code-wrapping.goml
+++ b/tests/rustdoc-gui/source-code-wrapping.goml
@@ -1,13 +1,14 @@
 // Checks that the interactions with the source code pages are working as expected.
 go-to: "file://" + |DOC_PATH| + "/src/test_docs/lib.rs.html"
 show-text: true
+set-window-size: (1000, 1000)
 
 define-function: (
     "click-code-wrapping",
     [expected],
     block {
-        click: "#wrap-source-code"
-        wait-for-local-storage: {"rustdoc-wrap-source-code": |expected|}
+        click: "#word-wrap-source-code"
+        wait-for-local-storage: {"rustdoc-word-wrap-source-code": |expected|}
     },
 )
 
@@ -15,6 +16,7 @@ store-size: (".rust code", {"width": width, "height": height})
 click: "#settings-menu"
 wait-for: "#settings"
 call-function: ("click-code-wrapping", {"expected": "true"})
+wait-for-size-false: (".rust code", {"width": |width|, "height": |height|})
 store-size: (".rust code", {"width": new_width, "height": new_height})
 // The width should now be smaller than the window's and the height
 // should have increased.
@@ -32,6 +34,7 @@ wait-for: "#settings"
 store-size: (".example-wrap .rust code", {"width": rust_width, "height": rust_height})
 store-size: (".example-wrap .language-text code", {"width": txt_width, "height": txt_height})
 call-function: ("click-code-wrapping", {"expected": "true"})
+wait-for-size-false: (".example-wrap .rust code", {"width": |rust_width|, "height": |rust_height|})
 
 store-size: (".example-wrap .rust code", {"width": new_rust_width, "height": new_rust_height})
 store-size: (".example-wrap .language-text code", {"width": new_txt_width, "height": new_txt_height})
@@ -40,5 +43,5 @@ assert: |rust_width| > |new_rust_width| && |rust_height| < |new_rust_height|
 assert: |txt_width| > |new_txt_width| && |txt_height| < |new_txt_height|
 
 call-function: ("click-code-wrapping", {"expected": "false"})
-assert-size: (".example-wrap .rust code", {"width": |rust_width|, "height": |rust_height|})
+wait-for-size: (".example-wrap .rust code", {"width": |rust_width|, "height": |rust_height|})
 assert-size: (".example-wrap .language-text code", {"width": |txt_width|, "height": |txt_height|})