From 62daea0cefcb14de5ab6bb04ccb7dd30de5d936a Mon Sep 17 00:00:00 2001
From: Daniil <123000937+gldaniil@users.noreply.github.com>
Date: Wed, 6 Mar 2024 14:43:40 +0500
Subject: [PATCH] Add example of `text-wrap` (#2745)

* Add example of  `text-wrap`

* Adding ability to edit text

* Changing the tip text
---
 live-examples/css-examples/text/meta.json     |  7 +++
 live-examples/css-examples/text/text-wrap.css | 11 +++++
 .../css-examples/text/text-wrap.html          | 49 +++++++++++++++++++
 3 files changed, 67 insertions(+)
 create mode 100644 live-examples/css-examples/text/text-wrap.css
 create mode 100644 live-examples/css-examples/text/text-wrap.html

diff --git a/live-examples/css-examples/text/meta.json b/live-examples/css-examples/text/meta.json
index 36886f565..637631b97 100644
--- a/live-examples/css-examples/text/meta.json
+++ b/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",
diff --git a/live-examples/css-examples/text/text-wrap.css b/live-examples/css-examples/text/text-wrap.css
new file mode 100644
index 000000000..8f473afe2
--- /dev/null
+++ b/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;
+}
diff --git a/live-examples/css-examples/text/text-wrap.html b/live-examples/css-examples/text/text-wrap.html
new file mode 100644
index 000000000..6cce6d1c4
--- /dev/null
+++ b/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>