style(theme-chalk): replace word-break with overflow-wrap (#15190)

* style(theme-chalk): replace word-break with overflow-wrap

closed #15167

* style(theme-chalk): remove text-align: justify

* style(theme-chalk): update

* style(theme-chalk): update

---------

Co-authored-by: 一只前端汪 <985313519@qq.com>

docs/.vitepress/vitepress/components/globals/resource.vue

@@ -149,7 +149,7 @@ const resourceCards = computed(() => [
     color: #99a9bf;
     padding: 0 30px;
     margin: 0;
-    word-break: break-word;
+    overflow-wrap: break-word;
     line-height: 1.8;
     min-height: 75px;
     margin-bottom: 16px;

docs/.vitepress/vitepress/styles/content.scss

@@ -28,7 +28,6 @@
     align-items: center;
     &.vp-link {
       white-space: nowrap;
-      word-break: keep-all;
     }
     .link-icon {
       margin-left: 0.25rem;

packages/theme-chalk/src/date-picker/picker.scss

@@ -122,7 +122,7 @@
     padding: 0 5px;
     margin: 0;
     font-size: 14px;
-    word-break: keep-all;
+    overflow-wrap: break-word;
     color: getCssVar('text-color', 'primary');
   }
 

packages/theme-chalk/src/image-viewer.scss

@@ -69,7 +69,6 @@
     @include e(actions__inner) {
       width: 100%;
       height: 100%;
-      text-align: justify;
       cursor: default;
       font-size: 23px;
       color: #fff;

packages/theme-chalk/src/message-box.scss

@@ -140,7 +140,7 @@
     + .#{$namespace}-message-box__message {
       padding-left: 36px;
       padding-right: 12px;
-      word-break: break-word;
+      overflow-wrap: break-word;
     }
 
     @each $type in (success, info, warning, error) {

packages/theme-chalk/src/message.scss

@@ -52,7 +52,7 @@
 
       .#{$namespace}-message__content {
         color: getCssVar('message', 'text-color');
-        overflow-wrap: anywhere;
+        overflow-wrap: break-word;
       }
     }
 

packages/theme-chalk/src/notification.scss

@@ -21,7 +21,7 @@
     left getCssVar('transition-duration'),
     right getCssVar('transition-duration'), top 0.4s,
     bottom getCssVar('transition-duration');
-  overflow-wrap: anywhere;
+  overflow-wrap: break-word;
   overflow: hidden;
   z-index: 9999;
 
@@ -51,7 +51,6 @@
     line-height: 24px;
     margin: 6px 0 0;
     color: getCssVar('notification-content-color');
-    text-align: justify;
 
     p {
       margin: 0;

packages/theme-chalk/src/popover.scss

@@ -14,10 +14,9 @@
     z-index: getCssVar('index-popper');
     color: getCssVar('text-color', 'regular');
     line-height: 1.4;
-    text-align: justify;
     font-size: getCssVar('popover-font-size');
     box-shadow: getCssVar('box-shadow-light');
-    word-break: break-all;
+    overflow-wrap: break-word;
     box-sizing: border-box;
 
     @include m(plain) {

packages/theme-chalk/src/popper.scss

@@ -14,7 +14,7 @@
   font-size: 12px;
   line-height: 20px;
   min-width: 10px;
-  word-wrap: break-word;
+  overflow-wrap: break-word;
   visibility: visible;
 
   $arrow-selector: #{& + '__arrow'};

packages/theme-chalk/src/step.scss

@@ -276,7 +276,7 @@
     @include pseudo('not(:last-of-type)') {
       @include e(title) {
         max-width: 50%;
-        word-break: break-all;
+        overflow-wrap: break-word;
       }
     }
 

packages/theme-chalk/src/table-v2.scss

@@ -221,7 +221,7 @@
       overflow: hidden;
       align-items: stretch;
       @include e('row-cell') {
-        word-break: break-all;
+        overflow-wrap: break-word;
       }
     }
   }

packages/theme-chalk/src/table.scss

@@ -184,7 +184,7 @@
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: normal;
-    word-break: break-all;
+    overflow-wrap: break-word;
     line-height: 23px;
     padding: 0 12px;
 

packages/theme-chalk/src/text.scss

@@ -14,7 +14,7 @@
   padding: 0;
   font-size: getCssVar('text', 'font-size');
   color: getCssVar('text', 'color');
-  word-break: break-all;
+  overflow-wrap: break-word;
 
   @include when(truncated) {
     display: inline-block;