diff --git a/components/alert/src/alert-bar/action.js b/components/alert/src/alert-bar/action.js
index f4aecb118b..273ecdc6eb 100644
--- a/components/alert/src/alert-bar/action.js
+++ b/components/alert/src/alert-bar/action.js
@@ -16,6 +16,7 @@ class Action extends Component {
                     span {
                         margin-right: ${spacers.dp12};
                         text-decoration: underline;
+                        white-space: nowrap;
                     }
                     span:hover {
                         cursor: pointer;
diff --git a/components/alert/src/alert-bar/alert-bar.stories.js b/components/alert/src/alert-bar/alert-bar.stories.js
index 9b8beb31db..972c276645 100644
--- a/components/alert/src/alert-bar/alert-bar.stories.js
+++ b/components/alert/src/alert-bar/alert-bar.stories.js
@@ -147,6 +147,21 @@ export const WithActions = () => (
 )
 WithActions.storyName = 'With actions'
 
+export const WithActionsAndInsufficientSpace = () => (
+    <AlertBar
+        permanent
+        actions={[
+            { label: 'Long action 1', onClick: () => {} },
+            { label: 'Long action 2', onClick: () => {} },
+        ]}
+    >
+        Some text, a pretty normal amount, that conflicts with pretty long
+        actions
+    </AlertBar>
+)
+WithActionsAndInsufficientSpace.storyName =
+    'With actions and insufficient space'
+
 export const Icons = () => (
     <React.Fragment>
         <AlertBar permanent>Default icon</AlertBar>