diff --git a/live-examples/css-examples/text/meta.json b/live-examples/css-examples/text/meta.json
index 637631b97..13a7d2c29 100644
--- 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
new file mode 100644
index 000000000..8f473afe2
--- /dev/null
+++ 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
new file mode 100644
index 000000000..2e9398b05
--- /dev/null
+++ b/live-examples/css-examples/text/text-wrap-mode.html
@@ -0,0 +1,28 @@
+
+
+ text-wrap-mode: wrap;
+
+ text-wrap-mode: nowrap;
text-wrap-style: auto;
+
+ text-wrap-style: balance;
+
+ text-wrap-style: pretty;
+
+ text-wrap-style: stable;
+
+