[css-text-3] Provide more extensive examples

Author: frivoal

css-text-3/Overview.bs

@@ -1709,42 +1709,88 @@ Text Processing</h3>
     </ol>
 
     <div class=example>
-      This example illustrates the consequence of [=hanging=] white space
+      This example shows that not [=hanging=] white space
+      at the end of lines with forced breaks
+      provides symmetry with the start of the line.
+      An underline is added to help visualize the spaces.
+      <pre><code class=lang-css>
+      p {
+        white-space: pre-wrap;
+        width: 5ch;
+        border: solid 1px;
+        font-family: monospace;
+        text-align: center;
+      }</code></pre>
+      <pre><code class=lang-markup>
+      &lt;p> 0 &lt;/p>
+      </code></pre>
+
+      The sample above would be rendered as follows:
+      <div style="word-wrap: normal; font-size: 2em; font-family: monospace; width: 5ch; border: solid 1px; white-space: pre;"> <span style="text-decoration: underline; text-decoration: underline orange"> 0 </span> </div>
+
+      Since the final space is before a forced line break
+      it does not hang,
+      and centering works as expected.
+    </div>
+
+    <div class=example>
+      This example illustrates the difference
+      between [=hanging=] white space
       at the end of lines without forced breaks,
-      and of not hanging at the end of lines with forced breaks.
+      and not hanging them at the end of lines with forced breaks.
       An underline is added to help visualize the spaces.
       <pre><code class=lang-css>
       p {
         white-space: pre-wrap;
         width: 3ch;
         border: solid 1px;
         font-family: monospace;
-        text-decoration: underline orange;
       }</code></pre>
       <pre><code class=lang-markup>
-      &lt;p>0 0 0 0 &lt;/p>
+      &lt;p> 0 0 0 0 &lt;/p>
       </code></pre>
 
       The sample above would be rendered as follows:
-      <div style="font-size: 2em; font-family: monospace; width: 3ch; border: solid 1px; white-space: pre; text-decoration: underline orange">0 0 <br>0 <br>0 </div>
+      <div style="word-wrap: normal; font-size: 2em; font-family: monospace; width: 3ch; border: solid 1px; white-space: pre; text-decoration: underline; text-decoration: underline orange"> 0 <br>0 0 <br>0 </div>
 
-      Because the last [=space=] is before a forced break,
-      and therefore does not hang,
-      a wrapping opportunity must be found earlier in the line,
-      introducing a break before the last “0”.
-
-      Additionally, if <code class=lang-css>p { text-align: right; }</code> was added,
+      If <code class=lang-css>p { text-align: right; }</code> was added,
       the result would be as follows:
-      <div style="font-size: 2em; font-family: monospace; width: 3ch; border: solid 1px; white-space: pre;"><span style="text-decoration: underline orange">0 0 </span><br>&nbsp;&nbsp;<span style="text-decoration: underline orange">0 </span><br> <span style="text-decoration: underline orange">0 </span></div>
+      <div style="word-wrap: normal; font-size: 2em; font-family: monospace; width: 3ch; border: solid 1px; white-space: pre;"> <span style="text-decoration: underline; text-decoration: underline orange"> 0 </span><br><span style="text-decoration: underline; text-decoration: underline orange">0 0 </span><br> <span style="text-decoration: underline; text-decoration: underline orange">0 </span></div>
 
       As the [=preserved=] [=spaces=] at the end of lines without a forced break must [=hang=],
       they are not considered when placing the rest of the line during text alignment.
       When aligning towards the end,
       this means any such [=spaces=] will overflow,
       and will not prevent the rest of the line's content from being flush with the edge of the line.
       On the other hand,
-      preserved spaces at the end of a line <em>with</em> a forced break do not hang,
-      and therefore are considered during text alignment.
+      preserved spaces at the end of a line <em>with</em> a forced break
+      do not hang.
+      Therefore, the space at the end of the last line in this example
+      does not [=hang=]
+      and is considered during text alignment.
+    </div>
+
+    <div class=example>
+      In the following example,
+      there is not enough room on any line to fit the end-of-line spaces,
+      so they [=hang=] on the line without forced break.
+      The last space,
+      if placed on the second line,
+      would overflow, and is not allowed to hang.
+      Therefore, it causes a soft wrap break earlier in the line,
+      before the last <code>0</code>.
+      An underline is added to help visualize the spaces.
+      <pre><code class=lang-css>
+      p {
+        white-space: pre-wrap;
+        width: 3ch;
+        border: solid 1px;
+        font-family: monospace;
+      }</code></pre>
+      <pre><code class=lang-markup>
+      &lt;p>0 0 0 0 &lt;/p>
+      </code></pre>
+      <div style="word-wrap: normal; font-size: 2em; font-family: monospace; width: 3ch; border: solid 1px; white-space: pre; text-decoration: underline; text-decoration: underline orange">0 0 <br>0 <br>0 </div>
     </div>
 
   <h3 id="tab-size-property" caniuse="css3-tabsize" oldids="tab-size">