32341 text wrap (#2746)

* added text-wrap-style live-example * added text-wrap-mode live-example * added t-w-mode & t--w-style to meta.json
mdn · Mar 19, 2024 · 838dd13 · 838dd13
1 parent 142417e
commit 838dd13
Show file tree

Hide file tree

Showing 5 changed files with 106 additions and 0 deletions.
diff --git a/live-examples/css-examples/text/meta.json b/live-examples/css-examples/text/meta.json
@@ -105,6 +105,20 @@
       "title": "CSS Demo: text-wrap",
       "type": "css"
     },
+    "textWrapMode": {
+      "cssExampleSrc": "./live-examples/css-examples/text/text-wrap-mode.css",
+      "exampleCode": "./live-examples/css-examples/text/text-wrap-mode.html",
+      "fileName": "text-wrap-mode.html",
+      "title": "CSS Demo: text-wrap-mode",
+      "type": "css"
+    },
+    "textWrapStyle": {
+      "cssExampleSrc": "./live-examples/css-examples/text/text-wrap-style.css",
+      "exampleCode": "./live-examples/css-examples/text/text-wrap-style.html",
+      "fileName": "text-wrap-style.html",
+      "title": "CSS Demo: text-wrap-style",
+      "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-mode.css b/live-examples/css-examples/text/text-wrap-mode.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-mode.html b/live-examples/css-examples/text/text-wrap-mode.html
@@ -0,0 +1,28 @@
+<section id="example-choice-list" class="example-choice-list large" data-property="text-wrap-mode">
+  <div class="example-choice" initial-choice="true">
+    <pre><code class="language-css">text-wrap-mode: 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-mode: nowrap;</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>
diff --git a/live-examples/css-examples/text/text-wrap-style.css b/live-examples/css-examples/text/text-wrap-style.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-style.html b/live-examples/css-examples/text/text-wrap-style.html
@@ -0,0 +1,42 @@
+<section id="example-choice-list" class="example-choice-list large" data-property="text-wrap-style">
+  <div class="example-choice" initial-choice="true">
+    <pre><code class="language-css">text-wrap-style: auto;</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-style: 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-style: 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-style: 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>