diff --git a/src/state-summary/state-card-display.html b/src/state-summary/state-card-display.html
index 4ab15fe771..1eb0f0deea 100644
--- a/src/state-summary/state-card-display.html
+++ b/src/state-summary/state-card-display.html
@@ -18,11 +18,14 @@
         text-align: right;
         line-height: 40px;
       }
+      .state.has-unit_of_measurement {
+        white-space: nowrap;
+      }
     </style>
 
     <div class='horizontal justified layout'>
       <state-info state-obj="[[stateObj]]" in-dialog='[[inDialog]]'></state-info>
-      <div class='state'>[[computeStateDisplay(localize, stateObj, language)]]</div>
+      <div class$='[[computeClassNames(stateObj)]]'>[[computeStateDisplay(localize, stateObj, language)]]</div>
     </div>
   </template>
 </dom-module>
@@ -45,6 +48,14 @@ class StateCardDisplay extends window.hassMixins.LocalizeMixin(Polymer.Element)
   computeStateDisplay(localize, stateObj, language) {
     return window.hassUtil.computeStateDisplay(localize, stateObj, language);
   }
+
+  computeClassNames(stateObj) {
+    const classes = [
+      'state',
+      window.hassUtil.attributeClassNames(stateObj, ['unit_of_measurement']),
+    ];
+    return classes.join(' ');
+  }
 }
 customElements.define(StateCardDisplay.is, StateCardDisplay);
 </script>