Add example of text-wrap (mdn#2745)

* Add example of  `text-wrap`

* Adding ability to edit text

* Changing the tip text

live-examples/css-examples/text/meta.json

@@ -98,6 +98,13 @@
       "title": "CSS Demo: text-transform",
       "type": "css"
     },
+    "textWrap": {
+      "cssExampleSrc": "./live-examples/css-examples/text/text-wrap.css",
+      "exampleCode": "./live-examples/css-examples/text/text-wrap.html",
+      "fileName": "text-wrap.html",
+      "title": "CSS Demo: text-wrap",
+      "type": "css"
+    },
     "userSelect": {
       "cssExampleSrc": "./live-examples/css-examples/text/user-select.css",
       "exampleCode": "./live-examples/css-examples/text/user-select.html",

live-examples/css-examples/text/text-wrap.css

@@ -0,0 +1,11 @@
+.whole-content-wrapper {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  width: 100%;
+}
+
+#example-element {
+  border: 1px solid #c5c5c5;
+  width: 250px;
+}

live-examples/css-examples/text/text-wrap.html

@@ -0,0 +1,49 @@
+<section id="example-choice-list" class="example-choice-list large" data-property="text-wrap">
+  <div class="example-choice" initial-choice="true">
+    <pre><code class="language-css">text-wrap: wrap;</code></pre>
+    <button type="button" class="copy hidden" aria-hidden="true">
+      <span class="visually-hidden">Copy to Clipboard</span>
+    </button>
+  </div>
+
+  <div class="example-choice">
+    <pre><code class="language-css">text-wrap: nowrap;</code></pre>
+    <button type="button" class="copy hidden" aria-hidden="true">
+      <span class="visually-hidden">Copy to Clipboard</span>
+    </button>
+  </div>
+
+  <div class="example-choice">
+    <pre><code class="language-css">text-wrap: balance;</code></pre>
+    <button type="button" class="copy hidden" aria-hidden="true">
+      <span class="visually-hidden">Copy to Clipboard</span>
+    </button>
+  </div>
+
+  <div class="example-choice">
+    <pre><code class="language-css">text-wrap: pretty;</code></pre>
+    <button type="button" class="copy hidden" aria-hidden="true">
+      <span class="visually-hidden">Copy to Clipboard</span>
+    </button>
+  </div>
+
+  <div class="example-choice">
+    <pre><code class="language-css">text-wrap: stable;</code></pre>
+    <button type="button" class="copy hidden" aria-hidden="true">
+      <span class="visually-hidden">Copy to Clipboard</span>
+    </button>
+  </div>
+</section>
+
+<div id="output" class="output large hidden">
+  <section id="default-example" class="default-example">
+    <div class="whole-content-wrapper">
+      <p>Edit the text in the box:</p>
+      <div id="example-element" class="transition-all">
+        <p contenteditable>
+          Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatem aut cum eum id quos est.
+        </p>
+      </div>
+    </div>
+  </section>
+</div>