- Check your form for validation errors. -
- -
- And some other stuff on another line, just for kicks. And
diff --git a/src-docs/src/views/toast/success.js b/src-docs/src/views/toast/success.js
index be627bdd714..48891b05ccf 100644
--- a/src-docs/src/views/toast/success.js
+++ b/src-docs/src/views/toast/success.js
@@ -1,14 +1,16 @@
import React from 'react';
import {
+ EuiButton,
+ EuiLink,
EuiToast,
} from '../../../../src/components';
export default () => (
While the layout will adjust properly for wrapping titles, they do not look particularly good.
@@ -17,7 +19,11 @@ export default () => (
- You should not even need a second paragraph. Again, we are getting long winded here.
+ And some other stuff on another line, just for kicks. And
Hi
diff --git a/src/components/toast/_toast.scss b/src/components/toast/_toast.scss
index f2452e5d18f..ef069832b68 100644
--- a/src/components/toast/_toast.scss
+++ b/src/components/toast/_toast.scss
@@ -94,3 +94,10 @@ $toastTypes: (
.euiToastHeader--withBody {
margin-bottom: $euiSizeM;
}
+
+/**
+ * 1. Prevent long lines from overflowing.
+ */
+.euiToastBody {
+ word-wrap: break-word; /* 1 */
+}
diff --git a/src/components/toast/toast.js b/src/components/toast/toast.js
index fff7ce63638..2bdf54abf04 100644
--- a/src/components/toast/toast.js
+++ b/src/components/toast/toast.js
@@ -63,7 +63,7 @@ export const EuiToast = ({ title, color, iconType, onClose, children, className,
if (children) {
optionalBody = (
-