diff --git a/public/trivabble.css b/public/trivabble.css
index ce40519..b36d130 100644
--- a/public/trivabble.css
+++ b/public/trivabble.css
@@ -125,19 +125,19 @@ html, #board, [draggable], .tile {
     overflow:hidden;
 }
 
-.special-cell-label-clip {
+.special-cell-label-clip .special-cell-label {
     text-overflow:clip;
 }
 
-.special-cell-label-dots {
+.special-cell-label-dots .special-cell-label {
     text-overflow:ellipsis;
 }
 
-.special-cell-label-none {
+.special-cell-label-none .special-cell-label {
     visibility:hidden;
 }
 
-.special-cell-label-short {
+.special-cell-label-short .special-cell-label {
     display:inline;
 }
 
diff --git a/public/trivabble.js b/public/trivabble.js
index 7ce7c1c..6c843b7 100644
--- a/public/trivabble.js
+++ b/public/trivabble.js
@@ -2317,14 +2317,14 @@
         setSetting("CellCaptions", mode);
         document.getElementById("cell-captions").value = mode;
 
+        board.classList.remove("special-cell-label-clip");
+        board.classList.remove("special-cell-label-dots");
+        board.classList.remove("special-cell-label-none");
+        board.classList.remove("special-cell-label-short");
+
+        board.classList.add("special-cell-label-" + mode);
+
         for (const cells of [].slice.call(document.getElementsByClassName("special-cell-label"))) {
-            cells.classList.remove("special-cell-label-clip");
-            cells.classList.remove("special-cell-label-dots");
-            cells.classList.remove("special-cell-label-none");
-            cells.classList.remove("special-cell-label-short");
-
-            cells.classList.add("special-cell-label-" + mode);
-
             cells.textContent = (mode === "short") ? cells.shortText : cells.longText;
         }
     }