diff --git a/src/librustdoc/html/static/css/rustdoc.css b/src/librustdoc/html/static/css/rustdoc.css
index c01a25534f9f9..9993dfb1d8c20 100644
--- a/src/librustdoc/html/static/css/rustdoc.css
+++ b/src/librustdoc/html/static/css/rustdoc.css
@@ -1941,13 +1941,8 @@ in src-script.js and main.js
pixels to avoid overflowing the topbar when the user sets a bigger
font size. */
font-size: 24px;
- }
-
- .mobile-topbar h2 a {
- display: block;
- text-overflow: ellipsis;
- overflow: hidden;
white-space: nowrap;
+ text-overflow: ellipsis;
}
.mobile-topbar .logo-container > img {
diff --git a/src/librustdoc/html/static/js/main.js b/src/librustdoc/html/static/js/main.js
index b46701b55ea7a..b26efb75ff657 100644
--- a/src/librustdoc/html/static/js/main.js
+++ b/src/librustdoc/html/static/js/main.js
@@ -45,7 +45,7 @@ function setMobileTopbar() {
const mobileTitle = document.createElement("h2");
mobileTitle.className = "location";
if (hasClass(document.querySelector(".rustdoc"), "crate")) {
- mobileTitle.innerText = `Crate ${window.currentCrate}`;
+ mobileTitle.innerHTML = `Crate ${window.currentCrate}`;
} else if (locationTitle) {
mobileTitle.innerHTML = locationTitle.innerHTML;
}
diff --git a/tests/rustdoc-gui/mobile-crate-name.goml b/tests/rustdoc-gui/mobile-crate-name.goml
new file mode 100644
index 0000000000000..a0c96eec8a5ad
--- /dev/null
+++ b/tests/rustdoc-gui/mobile-crate-name.goml
@@ -0,0 +1,22 @@
+// Checks that if the crate name is too long on mobile, it will not grow and overflow its parent
+// (thanks to text overflow ellipsis).
+
+go-to: "file://" + |DOC_PATH| + "/test_docs/index.html"
+// First we change the title to make it big.
+set-window-size: (350, 800)
+// We ensure that the "format" of the title is the same as the one we'll use.
+assert-text: (".mobile-topbar .location a", "test_docs")
+// We store the height we know is correct.
+store-property: (".mobile-topbar .location", {"offsetHeight": height})
+// We change the crate name to something longer.
+set-text: (".mobile-topbar .location a", "cargo_packager_resource_resolver")
+// And we check that the size remained the same.
+assert-property: (".mobile-topbar .location", {"offsetHeight": |height|})
+
+// Now we check if it works for the non-crate pages as well.
+go-to: "file://" + |DOC_PATH| + "/test_docs/struct.Foo.html"
+// We store the height we know is correct.
+store-property: (".mobile-topbar .location", {"offsetHeight": height})
+set-text: (".mobile-topbar .location a", "Something_incredibly_long_because")
+// And we check that the size remained the same.
+assert-property: (".mobile-topbar .location", {"offsetHeight": |height|})
diff --git a/tests/rustdoc-gui/type-declation-overflow.goml b/tests/rustdoc-gui/type-declation-overflow.goml
index 5780f5c88f82c..a97cc98897ae2 100644
--- a/tests/rustdoc-gui/type-declation-overflow.goml
+++ b/tests/rustdoc-gui/type-declation-overflow.goml
@@ -39,8 +39,8 @@ assert-property: ("pre.item-decl", {"scrollWidth": "950"})
set-window-size: (600, 600)
go-to: "file://" + |DOC_PATH| + "/lib2/too_long/struct.SuperIncrediblyLongLongLongLongLongLongLongGigaGigaGigaMegaLongLongLongStructName.html"
// It shouldn't have an overflow in the topbar either.
-store-property: (".mobile-topbar h2", {"scrollWidth": scrollWidth})
-assert-property: (".mobile-topbar h2", {"clientWidth": |scrollWidth|})
+store-property: (".mobile-topbar", {"scrollWidth": scrollWidth})
+assert-property: (".mobile-topbar", {"clientWidth": |scrollWidth|})
assert-css: (".mobile-topbar h2", {"overflow-x": "hidden"})
// Check wrapping for top main-heading h1 and out-of-band.