[css-text-3] Add example of hanging punctuation and right alignment

Author: frivoal

css-text-3/Overview.bs

@@ -1193,7 +1193,31 @@ Characters and Letters</h3>
 
     </ol>
 
-    Issue: Add example of hanging white space + same example right-aligned.
+    <div class=example>
+      This example illustrates the consequence of [=hanging=] white space
+      at the end of the line
+      on text alignement.
+      <pre><code class=lang-css>
+      p {
+        white-space: pre-wrap;
+        text-align: end;
+        width: 20ch;
+        border: solid 1px;
+      }</code></pre>
+      <pre><code class=lang-markup>
+      &lt;p>Lorem ipsum      &lt;/p>
+      </code></pre>
+
+      As the preserved spaces at the end of the line 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.
+      The sample above would therefore be rendered as follows:
+      <pre class=output style="width: 20ch; border: solid 1px; text-align: end;">
+      Lorem ipsum
+      </pre>
+    </div>
 
     <p>White space that was not removed or collapsed during the white space
       processing steps is called <dfn>preserved</dfn> white space.</p>