diff --git a/src/panels/config/energy/components/ha-energy-battery-settings.ts b/src/panels/config/energy/components/ha-energy-battery-settings.ts
index 4d7ce0101a..dc4923f27a 100644
--- a/src/panels/config/energy/components/ha-energy-battery-settings.ts
+++ b/src/panels/config/energy/components/ha-energy-battery-settings.ts
@@ -100,14 +100,14 @@ export class EnergyBatterySettings extends LitElement {
                     ></ha-icon>`
                   : html`<ha-svg-icon .path=${mdiBatteryHigh}></ha-svg-icon>`}
                 <div class="content">
-                  <span
+                  <span class="label"
                     >${getStatisticLabel(
                       this.hass,
                       source.stat_energy_from,
                       this.statsMetadata?.[source.stat_energy_from]
                     )}</span
                   >
-                  <span
+                  <span class="label"
                     >${getStatisticLabel(
                       this.hass,
                       source.stat_energy_to,
@@ -213,6 +213,10 @@ export class EnergyBatterySettings extends LitElement {
           display: flex;
           flex-direction: column;
         }
+        .label {
+          overflow: hidden;
+          text-overflow: ellipsis;
+        }
       `,
     ];
   }
diff --git a/src/panels/config/energy/components/styles.ts b/src/panels/config/energy/components/styles.ts
index d980606a44..af553c6732 100644
--- a/src/panels/config/energy/components/styles.ts
+++ b/src/panels/config/energy/components/styles.ts
@@ -36,6 +36,8 @@ export const energyCardStyles = css`
   }
   .row .content {
     flex-grow: 1;
+    overflow: hidden;
+    text-overflow: ellipsis;
   }
   ha-icon-button {
     color: var(--secondary-text-color);