diff --git a/CHANGELOG.md b/CHANGELOG.md
index d74585ddb4b..8358108a9c2 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,5 +1,7 @@
## [`master`](https://github.com/elastic/eui/tree/master)
+- Added utility CSS classes for text and alignment concerns. ([#774](https://github.com/elastic/eui/pull/774))
+
**Bug fixes**
- Added aria labeling requirements for `EuiBadge` , as well as a generic prop_type function `requiresAriaLabel` in `utils` to check for it. ([#777](https://github.com/elastic/eui/pull/777))
diff --git a/src-docs/src/routes.js b/src-docs/src/routes.js
index c5823c64d00..bde014ec8a9 100644
--- a/src-docs/src/routes.js
+++ b/src-docs/src/routes.js
@@ -39,6 +39,10 @@ import WritingGuidelines
import { IsColorDarkExample }
from './views/is_color_dark/is_color_dark_example';
+
+import { UtilityClassesExample }
+ from './views/utility_classes/utility_classes_example';
+
// Component examples
import { AccessibilityExample }
@@ -336,6 +340,7 @@ const navigation = [{
IsColorDarkExample,
OutsideClickDetectorExample,
PortalExample,
+ UtilityClassesExample,
].map(example => createExample(example)),
}, {
name: 'Package',
diff --git a/src-docs/src/views/utility_classes/utility_classes.js b/src-docs/src/views/utility_classes/utility_classes.js
new file mode 100644
index 00000000000..f4aad5ed3e5
--- /dev/null
+++ b/src-docs/src/views/utility_classes/utility_classes.js
@@ -0,0 +1,97 @@
+import React from 'react';
+
+import {
+ EuiText,
+ EuiCode,
+ EuiSpacer,
+ EuiIcon,
+} from '../../../../src/components';
+
+export default () => (
+
+
+ Text
+
+
+
+
+ .eui-textLeft
+
+
+
+ .eui-textCenter
+
+
+ .eui-textRight
+
+
+
+
+
+ .eui-textNoWrap will force text not to wrap even in small containers.
+
+
+
+
+
+ .eui-textBreakAll will break up anything. It is useful for long urls like http://www.hithereimalongurl.com/dave_will_just_ramble_on_in_a_long_sentence_like_this/?ok=cool
+
+
+
+
+
+ .eui-textBreakWord will only break up at the end of words. Long urls will still break http://www.hithereimalongurl.com/dave_will_just_ramble_on_in_a_long_sentence_like_this/?ok=cool
+
+
+
+
+
+ .eui-textTruncate will ellipsis after a certain point.
+
+
+ Vertical alignment
+
+
+
+
+
+ .eui-alignTop
+
+
+
+
+
+
+ .eui-alignMiddle
+
+
+
+
+
+
+ .eui-alignBottom
+
+
+
+
+
+
+ .eui-alignBaseline
+
+
+
+
+ Display
+
+ .eui-displayBlock
+
+
+
+ .eui-displayInline
+
+
+
+ .eui-displayInlineBlock
+
+
+);
diff --git a/src-docs/src/views/utility_classes/utility_classes_example.js b/src-docs/src/views/utility_classes/utility_classes_example.js
new file mode 100644
index 00000000000..8e18284c28e
--- /dev/null
+++ b/src-docs/src/views/utility_classes/utility_classes_example.js
@@ -0,0 +1,31 @@
+import React from 'react';
+
+import { renderToHtml } from '../../services';
+
+import {
+ GuideSectionTypes,
+} from '../../components';
+
+import UtilityClasses from './utility_classes';
+const utilityClassesSource = require('!!raw-loader!./utility_classes');
+const utilityClassesHtml = renderToHtml(UtilityClasses);
+
+export const UtilityClassesExample = {
+ title: 'CSS utility classes',
+ sections: [{
+ source: [{
+ type: GuideSectionTypes.JS,
+ code: utilityClassesSource,
+ }, {
+ type: GuideSectionTypes.HTML,
+ code: utilityClassesHtml,
+ }],
+ text: (
+
+ The following CSS-only classes are provided as helper utilities. They are
+ useful for making micro-adjustments to existing React components.
+
+ ),
+ demo: ,
+ }],
+};
diff --git a/src/global_styling/index.scss b/src/global_styling/index.scss
index 29729d85f7b..573503099da 100644
--- a/src/global_styling/index.scss
+++ b/src/global_styling/index.scss
@@ -9,5 +9,8 @@
// Mixins provide generic code expansion through helpers
@import 'mixins/index';
+// Utility classes provide one-off selectors for common css problems
+@import 'utility/index';
+
// The reset file makes use of variables and mixins
@import 'reset/index';
diff --git a/src/global_styling/utility/_index.scss b/src/global_styling/utility/_index.scss
new file mode 100644
index 00000000000..0be3e98b1e7
--- /dev/null
+++ b/src/global_styling/utility/_index.scss
@@ -0,0 +1 @@
+@import 'utility';
diff --git a/src/global_styling/utility/_utility.scss b/src/global_styling/utility/_utility.scss
new file mode 100644
index 00000000000..bd51115aaeb
--- /dev/null
+++ b/src/global_styling/utility/_utility.scss
@@ -0,0 +1,38 @@
+// Vertical alignment
+.eui-alignBaseline { vertical-align: baseline !important; }
+.eui-alignBottom { vertical-align: bottom !important; }
+.eui-alignMiddle { vertical-align: middle !important; }
+.eui-alignTop { vertical-align: top !important; }
+
+// Display
+.eui-displayBlock {display: block !important;}
+.eui-displayInline {display: inline !important;}
+.eui-displayInlineBlock {display: inline-block !important;}
+
+// Text
+.eui-textCenter {text-align: center !important;}
+.eui-textLeft {text-align: left !important;}
+.eui-textRight {text-align: right !important;}
+.eui-textBreakWord {word-break: break-word !important;}
+.eui-textBreakAll {word-break: break-all !important;}
+.eui-textNoWrap {white-space: nowrap !important;}
+.eui-textInheritColor {color: inherit !important;}
+
+/**
+ * Text truncation
+ *
+ * Prevent text from wrapping onto multiple lines, and truncate with an
+ * ellipsis.
+ *
+ * 1. Ensure that the node has a maximum width after which truncation can
+ * occur.
+ * 2. Fix for IE 8/9 if `word-wrap: break-word` is in effect on ancestor
+ * nodes.
+ */
+.eui-textTruncate {
+ max-width: 100%; /* 1 */
+ overflow: hidden !important;
+ text-overflow: ellipsis !important;
+ white-space: nowrap !important;
+ word-wrap: normal !important; /* 2 */
+}