diff --git a/packages/@lightningjs/ui-components/src/components/InlineContent/InlineContent.js b/packages/@lightningjs/ui-components/src/components/InlineContent/InlineContent.js
index 0b57cd225..935a789a8 100644
--- a/packages/@lightningjs/ui-components/src/components/InlineContent/InlineContent.js
+++ b/packages/@lightningjs/ui-components/src/components/InlineContent/InlineContent.js
@@ -148,21 +148,26 @@ export default class InlineContent extends Base {
     if (this.children.length) {
       setTimeout(() => {
         this.multiLineHeight = this.finalH;
+
         if (
           this.flex &&
           this.flex._layout &&
           this.flex._layout._lineLayouter &&
           this.flex._layout._lineLayouter._lines
         ) {
+          // only using this.flex._layout._lineLayouter._lines.length if maxLines is larger than the number of lines so we don't have a height too large
+          const multiplierLines =
+            this.maxLines === undefined ||
+            this.maxLines > this.flex._layout._lineLayouter._lines.length
+              ? this.flex._layout._lineLayouter._lines.length
+              : this.maxLines;
+
           this.multiLineHeight =
-            this.style.textStyle.lineHeight *
-            this.flex._layout._lineLayouter._lines.length;
-          this.h = this.multiLineHeight;
+            this.style.textStyle.lineHeight * multiplierLines;
 
           if (this._shouldTruncate) {
             this._renderMaxLines();
           }
-
           this._notifyAncestors();
         } else {
           this._contentLoaded();
diff --git a/packages/@lightningjs/ui-components/src/components/TextBox/TextBox.js b/packages/@lightningjs/ui-components/src/components/TextBox/TextBox.js
index 498deb46a..ad8cc2814 100644
--- a/packages/@lightningjs/ui-components/src/components/TextBox/TextBox.js
+++ b/packages/@lightningjs/ui-components/src/components/TextBox/TextBox.js
@@ -146,6 +146,8 @@ export default class TextBox extends Base {
   _updateInlineContent() {
     this.patch({ Text: undefined });
 
+    const contentStyle = this._textStyleSet;
+
     const inlineContentPatch = InlineContent.properties.reduce(
       (acc, prop) => {
         if (this[prop] != undefined) {
@@ -157,20 +159,20 @@ export default class TextBox extends Base {
       {
         style: {
           ...this.style,
-          textStyle: this._textStyleSet
+          textStyle: contentStyle
         }
       }
     );
 
-    if (this._textStyleSet.wordWrapWidth) {
-      inlineContentPatch.w = this._textStyleSet.wordWrapWidth;
+    if (contentStyle.wordWrapWidth) {
+      inlineContentPatch.w = contentStyle.wordWrapWidth;
       inlineContentPatch.rtt = true;
     }
-    if (this._textStyleSet.maxLines) {
-      inlineContentPatch.maxLines = this._textStyleSet.maxLines;
+    if (contentStyle.maxLines) {
+      inlineContentPatch.maxLines = contentStyle.maxLines;
     }
-    if (this._textStyleSet.maxLinesSuffix) {
-      inlineContentPatch.maxLinesSuffix = this._textStyleSet.maxLinesSuffix;
+    if (contentStyle.maxLinesSuffix) {
+      inlineContentPatch.maxLinesSuffix = contentStyle.maxLinesSuffix;
     }
 
     this.patch({
diff --git a/packages/@lightningjs/ui-components/src/components/TextBox/TextBox.stories.js b/packages/@lightningjs/ui-components/src/components/TextBox/TextBox.stories.js
index 9706a6b6a..9d8515854 100644
--- a/packages/@lightningjs/ui-components/src/components/TextBox/TextBox.stories.js
+++ b/packages/@lightningjs/ui-components/src/components/TextBox/TextBox.stories.js
@@ -32,7 +32,7 @@ const { args: inlineContentArgs, argTypes: inlineContentArgTypes } =
 const lorum =
   'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum sodales est eu eleifend interdum. Vivamus egestas maximus elementum. Sed condimentum ligula justo, non sollicitudin lectus rutrum vel. Integer iaculis vitae nisl quis tincidunt. Sed quis dui vehicula, vehicula felis a, tempor leo. Fusce tincidunt, ante eget pretium efficitur, libero elit volutpat quam, sit amet porta tortor odio non ligula. Ut sed dolor eleifend massa auctor porttitor eget ut lectus. Vivamus elementum lorem mauris, eu luctus tortor posuere sit amet. Nunc a interdum metus.';
 
-export const Basic = () =>
+export const Basic = args =>
   class Basic extends lng.Component {
     static _template() {
       return {
@@ -40,7 +40,12 @@ export const Basic = () =>
           type: TextBox,
           fixed: true,
           w: 600,
-          style: { textStyle: { maxLines: 3 } }
+          style: {
+            textStyle: {
+              maxLines: args.maxLines,
+              contentWrap: args.contentWrap
+            }
+          }
         }
       };
     }
@@ -51,7 +56,9 @@ Basic.args = {
   marquee: false,
   fixed: true,
   hideOnLoad: false,
-  w: 600
+  w: 600,
+  maxLines: 3,
+  contentWrap: false
 };
 
 Basic.argTypes = {
@@ -94,10 +101,27 @@ Basic.argTypes = {
     table: {
       defaultValue: { summary: 0 }
     }
+  },
+  maxLines: {
+    control: 'number',
+    description: 'maximum number of lines to render before truncation',
+    type: 'number',
+    table: {
+      defaultValue: { summary: 'undefined' }
+    }
+  },
+  contentWrap: {
+    control: 'boolean',
+    description:
+      'Determines whether the containing flexbox should wrap the content onto the next line',
+    type: 'boolean',
+    table: {
+      defaultValue: { summary: false }
+    }
   }
 };
 
-export const WithInlineContentArray = () =>
+export const WithInlineContentArray = args =>
   class WithInlineContentArray extends lng.Component {
     static _template() {
       return {
@@ -125,7 +149,14 @@ export const WithInlineContentArray = () =>
             'for fun',
             { badge: 'HD', title: 'HD' },
             { badge: 'SD', title: 'SD' }
-          ]
+          ],
+          style: {
+            textStyle: {
+              maxLines: args.maxLines,
+              maxLinesSuffix: args.maxLinesSuffix,
+              contentWrap: args.contentWrap
+            }
+          }
         }
       };
     }
@@ -134,7 +165,7 @@ export const WithInlineContentArray = () =>
 WithInlineContentArray.args = inlineContentArgs;
 WithInlineContentArray.argTypes = inlineContentArgTypes;
 
-export const WithInlineContentString = () =>
+export const WithInlineContentString = args =>
   class WithInlineContentArray extends lng.Component {
     static _template() {
       return {
@@ -149,6 +180,13 @@ export const WithInlineContentString = () =>
               fontStyle: 'italic',
               textColor: getHexColor('FF6194')
             }
+          },
+          style: {
+            textStyle: {
+              maxLines: args.maxLines,
+              maxLinesSuffix: args.maxLinesSuffix,
+              contentWrap: args.contentWrap
+            }
           }
         }
       };
@@ -158,7 +196,7 @@ export const WithInlineContentString = () =>
 WithInlineContentString.args = inlineContentArgs;
 WithInlineContentString.argTypes = inlineContentArgTypes;
 
-export const WithInlineContentTruncation = () =>
+export const WithInlineContentTruncation = args =>
   class Basic extends lng.Component {
     static _template() {
       return {
@@ -167,8 +205,9 @@ export const WithInlineContentTruncation = () =>
           w: 500,
           style: {
             textStyle: {
-              maxLines: 2,
-              maxLinesSuffix: '...'
+              maxLines: args.maxLines,
+              maxLinesSuffix: args.maxLinesSuffix,
+              contentWrap: args.contentWrap
             }
           },
           content: [
@@ -192,9 +231,11 @@ export const WithInlineContentTruncation = () =>
             { badge: 'HD', title: 'HD' },
             { badge: 'SD', title: 'SD' },
             ', and this should truncate before going on to a third line.'
-          ],
-          contentWrap: true
+          ]
         }
       };
     }
   };
+
+WithInlineContentTruncation.args = inlineContentArgs;
+WithInlineContentTruncation.argTypes = inlineContentArgTypes;