diff --git a/packages/vant/src/toast/README.md b/packages/vant/src/toast/README.md
index 0cbaded42..14abb9c16 100644
--- a/packages/vant/src/toast/README.md
+++ b/packages/vant/src/toast/README.md
@@ -96,6 +96,24 @@ showToast({
});
```
+### Word Break
+
+Using `wordBreak` option to set whether line breaks appear wherever the text would otherwise overflow its content box. The default value is `break-all`, and can be set to `break-word` or `normal`.
+
+```js
+import { showToast } from 'vant';
+
+showToast({
+ message: 'This message will contain a incomprehensibilities long word.',
+ wordBreak: 'break-all',
+});
+
+showToast({
+ message: 'This message will contain a incomprehensibilities long word.',
+ wordBreak: 'break-word',
+});
+```
+
### Update Message
```js
@@ -199,7 +217,7 @@ Vant exports following Toast utility functions:
| type | Can be set to `loading` `success` `fail` `html` | _ToastType_ | `text` |
| position | Can be set to `top` `middle` `bottom` | _ToastPosition_ | `middle` |
| message | Message | _string_ | `''` |
-| wordBreak | Can be set to `break-normal` `break-all` `break-word` | _ToastWordBreak_ | `''` |
+| wordBreak | Can be set to `normal` `break-all` `break-word` | _ToastWordBreak_ | `'break-all'` |
| icon | Custom icon | _string_ | - |
| iconSize | Custom icon size | _number \| string_ | `36px` |
| iconPrefix | Icon className prefix | _string_ | `van-icon` |
diff --git a/packages/vant/src/toast/README.zh-CN.md b/packages/vant/src/toast/README.zh-CN.md
index 465f3b1de..68e61f0bd 100644
--- a/packages/vant/src/toast/README.zh-CN.md
+++ b/packages/vant/src/toast/README.zh-CN.md
@@ -110,6 +110,26 @@ showToast({
});
```
+### 文字换行方式
+
+通过 `wordBreak` 选择可以控制 Toast 中的文字过长时的截断方式,默认值为 `break-all`,可选值为 `break-word` 和 `normal`。
+
+```js
+import { showToast } from 'vant';
+
+// 换行时截断单词
+showToast({
+ message: 'This message will contain a incomprehensibilities long word.',
+ wordBreak: 'break-all',
+});
+
+// 换行时不截断单词
+showToast({
+ message: 'This message will contain a incomprehensibilities long word.',
+ wordBreak: 'break-word',
+});
+```
+
### 动态更新提示
执行 Toast 方法时会返回对应的 Toast 实例,通过修改实例上的 `message` 属性可以实现动态更新提示的效果。
@@ -216,7 +236,7 @@ Vant 中导出了以下 Toast 相关的辅助函数:
| type | 提示类型,可选值为 `loading` `success`
`fail` `html` | _ToastType_ | `text` |
| position | 位置,可选值为 `top` `bottom` | _ToastPosition_ | `middle` |
| message | 文本内容,支持通过`\n`换行 | _string_ | `''` |
-| wordBreak | 文本内容的换行方式,可选值为 `break-normal` `break-all` `break-word` | _ToastWordBreak_ | `''` |
+| wordBreak | 文本内容的换行方式,可选值为 `normal` `break-all` `break-word` | _ToastWordBreak_ | `'break-all'` |
| icon | 自定义图标,支持传入图标名称或图片链接,等同于 Icon 组件的 [name 属性](#/zh-CN/icon#props) | _string_ | - |
| iconSize | 图标大小,如 `20px` `2em`,默认单位为 `px` | _number \| string_ | `36px` |
| iconPrefix | 图标类名前缀,等同于 Icon 组件的 [class-prefix 属性](#/zh-CN/icon#props) | _string_ | `van-icon` |
diff --git a/packages/vant/src/toast/Toast.tsx b/packages/vant/src/toast/Toast.tsx
index 98da6b022..bce0d2673 100644
--- a/packages/vant/src/toast/Toast.tsx
+++ b/packages/vant/src/toast/Toast.tsx
@@ -152,7 +152,11 @@ export default defineComponent({
return () => (
{
}, 1000);
};
+const showWordBreakToast = (wordBreak: ToastWordBreak) => {
+ showToast({
+ message: 'This message will contain a incomprehensibilities long word.',
+ wordBreak,
+ });
+};
+
const show = ref(false);
const image = cdnURL('cat.jpeg');
@@ -143,6 +157,19 @@ const image = cdnURL('cat.jpeg');
+
+
+
+
+
diff --git a/packages/vant/src/toast/index.less b/packages/vant/src/toast/index.less
index d665845de..5dffdd564 100644
--- a/packages/vant/src/toast/index.less
+++ b/packages/vant/src/toast/index.less
@@ -46,11 +46,6 @@
word-wrap: normal;
}
- &-all {
- word-wrap: normal;
- word-break: break-all;
- }
-
&-word {
word-break: normal;
word-wrap: break-word;
diff --git a/packages/vant/src/toast/index.ts b/packages/vant/src/toast/index.ts
index e66f83ca5..edd4a73fa 100644
--- a/packages/vant/src/toast/index.ts
+++ b/packages/vant/src/toast/index.ts
@@ -21,6 +21,7 @@ export type {
ToastOptions,
ToastPosition,
ToastThemeVars,
+ ToastWordBreak,
} from './types';
declare module 'vue' {
diff --git a/packages/vant/src/toast/test/__snapshots__/demo.spec.ts.snap b/packages/vant/src/toast/test/__snapshots__/demo.spec.ts.snap
index f11efc1e7..121fe8928 100644
--- a/packages/vant/src/toast/test/__snapshots__/demo.spec.ts.snap
+++ b/packages/vant/src/toast/test/__snapshots__/demo.spec.ts.snap
@@ -115,6 +115,32 @@ exports[`should render demo and match snapshot 1`] = `
+
+
+
+
+ Break All
+
+
+
+
+
+
+
+
+ Break Word
+
+
+
+
+
+