🐛 Change word-break style of description (#253)

* 🐛 Change `word-break` style of description Use `break-word` instead of `break-all` to avoid breaking in the middle of the words in description. * Create short-trains-push.md * Update short-trains-push.md --------- Co-authored-by: Wei He <[email protected]>
wei · Apr 12, 2024 · 0e8a230 · 0e8a230
1 parent 1a51c72
commit 0e8a230
Show file tree

Hide file tree

Showing 3 changed files with 7 additions and 2 deletions.
diff --git a/.changeset/short-trains-push.md b/.changeset/short-trains-push.md
@@ -0,0 +1,5 @@
+---
+"socialify": minor
+---
+
+Change `word-break` style of description
diff --git a/src/components/preview/__snapshots__/card.test.tsx.snap b/src/components/preview/__snapshots__/card.test.tsx.snap
@@ -84,7 +84,7 @@ exports[`Card #2 renders 1`] = `
   </p>
   <p
     class="card-description-wrapper"
-    style="display: flex; justify-content: center; width: 100%; margin-top: 10px; margin-bottom: 0px; font-size: 17px; line-height: 1.4; max-height: 3em; overflow: hidden; word-break: break-all; white-space: pre-wrap;"
+    style="display: flex; justify-content: center; width: 100%; margin-top: 10px; margin-bottom: 0px; font-size: 17px; line-height: 1.4; max-height: 3em; overflow: hidden; word-break: break-word; white-space: pre-wrap;"
   >
     TEST DESCRIPTION
   </p>

diff --git a/src/components/preview/card.tsx b/src/components/preview/card.tsx
@@ -143,7 +143,7 @@ export const Card = (config: Configuration) => {
             lineHeight: 1.4,
             maxHeight: '3em',
             overflow: 'hidden',
-            wordBreak: 'break-all',
+            wordBreak: 'break-word',
             whiteSpace: 'pre-wrap'
           }}>
           {config.description.value}