made text wrapping in span work

src/css/style.css

@@ -365,6 +365,7 @@ a.button:visited {
 }
 
 .p-left-small {
+    display: inline;
     padding-left: 0.3rem;
     height: 1.47rem;
 }
@@ -374,7 +375,22 @@ a.button:visited {
 }
 
 .spoiler-text {
-    display: inline-block;
+    display: inline;
+    /* These are technically the same, but use both */
+    overflow-wrap: break-word;
+    word-wrap: break-word;
+
+    -ms-word-break: break-all;
+    /* This is the dangerous one in WebKit, as it breaks things wherever */
+    word-break: break-all;
+    /* Instead use this non-standard one: */
+    word-break: break-word;
+
+    /* Adds a hyphen where the word breaks, if supported (No Blink) */
+    -ms-hyphens: auto;
+    -moz-hyphens: auto;
+    -webkit-hyphens: auto;
+    hyphens: auto;
 }
 
 .radio,

src/js/HKCheckCompletion.js

@@ -27,7 +27,7 @@ const FLEUR_DIVIDE = "<div class='horizontal-line'></div>";
 let completionSymbol = SYMBOL_FALSE;
 
 let divStart = [
-    "<div class='flex-container'>"
+    "<div class='single-entry'>"
 ].join("\n");
 
 let divStartCenter = [
@@ -330,7 +330,7 @@ function FillHTML(divId, textPrefix = "Unknown Completion Element: ", textSuffix
     let b = ["<b>", "</b>"];
     if (!textPrefix.length) b = ["", ""];
 
-    let span = ["<span class='flex-row location'>", "</span>"];
+    let span = ["<span class='location'>", "</span>"];
     let spoilerSpan = ["<span class='spoiler-text'>", "</span>"];
     if (divId === HK.DIV_ID.hints) {
         span[0] = "<span>";
@@ -338,7 +338,7 @@ function FillHTML(divId, textPrefix = "Unknown Completion Element: ", textSuffix
     }
 
     let dash = "";
-    if (textSuffix.length && textPrefix.length) dash = " — ";
+    if (textSuffix.length && textPrefix.length) dash = "— ";
 
     document.getElementById(divId.id).innerHTML += divStart + icon + b[0] + textPrefix + b[1] + span[0] + pSpan + spoilerSpan[0] + dash + textSuffix + spoilerSpan[1] + span[1] + divEnd;
 }