diff --git a/changes/27876-host-details-labels b/changes/27876-host-details-labels
new file mode 100644
index 0000000000..4d7b771550
--- /dev/null
+++ b/changes/27876-host-details-labels
@@ -0,0 +1 @@
+- Elegantly handle host details page label pills for labels with very long names
diff --git a/frontend/pages/hosts/details/cards/Labels/Labels.tsx b/frontend/pages/hosts/details/cards/Labels/Labels.tsx
index 021daddfc6..884c256260 100644
--- a/frontend/pages/hosts/details/cards/Labels/Labels.tsx
+++ b/frontend/pages/hosts/details/cards/Labels/Labels.tsx
@@ -7,6 +7,7 @@ import classnames from "classnames";
 import Card from "components/Card";
 import CardHeader from "components/CardHeader";
 import { LABEL_DISPLAY_MAP } from "utilities/constants";
+import TooltipTruncatedText from "components/TooltipTruncatedText";
 
 const baseClass = "labels-card";
 
@@ -31,9 +32,15 @@ const Labels = ({
           variant="pill"
           className="list__button"
         >
-          {label.label_type === "builtin" && label.name in LABEL_DISPLAY_MAP
-            ? LABEL_DISPLAY_MAP[label.name as keyof typeof LABEL_DISPLAY_MAP]
-            : label.name}
+          <TooltipTruncatedText
+            value={
+              label.label_type === "builtin" && label.name in LABEL_DISPLAY_MAP
+                ? LABEL_DISPLAY_MAP[
+                    label.name as keyof typeof LABEL_DISPLAY_MAP
+                  ]
+                : label.name
+            }
+          />
         </Button>
       </li>
     );
diff --git a/frontend/pages/hosts/details/cards/Labels/_styles.scss b/frontend/pages/hosts/details/cards/Labels/_styles.scss
new file mode 100644
index 0000000000..20ae38f568
--- /dev/null
+++ b/frontend/pages/hosts/details/cards/Labels/_styles.scss
@@ -0,0 +1,9 @@
+.labels-card {
+  .button,
+  .children-wrapper {
+    max-width: 100%;
+    .__react_component_tooltip {
+      font-weight: $regular;
+    }
+  }
+}