made text wrapping in span work

docs/index.html

@@ -9,8 +9,8 @@
     <!-- <link href="css/fontello.css" rel="stylesheet"> -->
     <!-- <link href="css/style.css" rel="stylesheet"> -->
     <title>Hollow Knight: Analyze Save Completion Online</title>
-    <meta name="description" content="A simple open source tool for checking what you missed for your Game Completion Percentage.">
+    <meta name="description" content="A simple open source tool for checking every single thing you missed for your Game Completion Percentage.">
-	<meta name="keywords" content="hollow knight, tool, online, save, game, completion, check, checker, percentage, percent, left">
+	<meta name="keywords" content="hollow knight, tool, online, save, game, completion, check, checker, percentage, percent, left, analyze, analyzer, file">
     
     <!-- Open Graph / Facebook -->
     <meta property="og:type" content="website">

docs/main.css

@@ -472,6 +472,7 @@ a.button:visited {
 }
 
 .p-left-small {
+    display: inline;
     padding-left: 0.3rem;
     height: 1.47rem;
 }
@@ -481,7 +482,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/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;
 }