Merge pull request #852 from xiaoAriana/feat_toast_wrap

toast supports line wrap
didi · May 17, 2024 · 83489d3 · 83489d3
2 parents 1a51a82 + 7d82460
commit 83489d3
Show file tree

Hide file tree

Showing 3 changed files with 9 additions and 6 deletions.
diff --git a/components/toast/README.en-US.md b/components/toast/README.en-US.md
@@ -29,7 +29,7 @@ Dynamically create a toast
 |----|-----|------|------|------|
 | icon | name of icon | String | - | refer to `Icon` component for customized icons|
 | iconSvg | use svg icon | Boolean | `false` |-|
-| content | content of message| String/Number | - |- |
+| content | content of message| String/Number | - | content supports two lines display <sup class="version-after">2.7.1+</sup>  |
 | duration | toast will be closed in milliseconds; if set duration as`0`, the toast will always be visible | Number | `3000` | - |
 | position | display position | String | `center` | `top/center/bottom` |
 | hasMask | whether to show a transparent mask, which will prevent users from clicking| Boolean | `false` | - |

diff --git a/components/toast/README.md b/components/toast/README.md
@@ -31,7 +31,7 @@ Vue.component(Toast.component.name, Toast.component) // 组件引入
 |----|-----|------|------|------|
 | icon | Icon组件图标名称 | String | - |如需自定义图标, 请查看`Icon`组件 |
 | iconSvg | 使用svg图标 | Boolean | `false` |-|
-| content | 提示内容文本 | String | - |- |
+| content | 提示内容文本 | String | - |内容支持2行展示 <sup class="version-after">2.7.1+</sup>|
 | duration | 显示多少毫秒后自动消失, 若为`0`则一直显示 | Number | `3000` | - |
 | position | 展示位置 | String | `center` | `top/center/bottom` |
 | hasMask | 是否显示透明遮罩, 以此防止用户点击 | Boolean | `false` | - |

diff --git a/components/toast/toast.vue b/components/toast/toast.vue
@@ -132,7 +132,7 @@ export default {
 
 .md-toast-content
   display inline-flex
-  align-items center
+  align-items flex-start
   max-width 100%
   min-width 80px
   padding toast-padding
@@ -145,12 +145,15 @@ export default {
   box-sizing border-box
   overflow hidden
   .md-toast-text
-    white-space nowrap
-    text-overflow: ellipsis
-    overflow hidden
+    word-break break-all
+    white-space normal
+    display -webkit-box
+    -webkit-box-orient vertical
+    -webkit-line-clamp 2
   &.square
     display flex
     flex-direction column
+    align-items center
     width 240px
     min-height 232px
     padding 54px 36px 48px 36px