diff --git a/bigbluebutton-html5/imports/ui/components/captions/live/component.jsx b/bigbluebutton-html5/imports/ui/components/captions/live/component.jsx
index 2e7472717c5f..646f5c8700c4 100644
--- a/bigbluebutton-html5/imports/ui/components/captions/live/component.jsx
+++ b/bigbluebutton-html5/imports/ui/components/captions/live/component.jsx
@@ -2,6 +2,7 @@ import React, { PureComponent } from 'react';
 import PropTypes from 'prop-types';
 import Service from '/imports/ui/components/captions/service';
 
+const LINEHEIGHT = 1.3 //1.2 - 1.5; when "line-height: normal", 1.2 for western fonts and 1.5 for Japanese fonts. 
 const CAPTIONS_CONFIG = Meteor.settings.public.captions;
 
 class LiveCaptions extends PureComponent {
@@ -23,6 +24,23 @@ class LiveCaptions extends PureComponent {
         this.setState({ clear: false });
       }
     } else {
+      // Set clip-path to limit max 2 lines
+      let regionHeight = 0;
+      let regionFontSize = 0;
+      const captionWindow = document.getElementById("caption-window");
+      if (captionWindow) {
+        const captionWindowStyle = window.getComputedStyle(captionWindow);
+        regionHeight = captionWindow.clientHeight;
+        regionFontSize = parseInt(captionWindowStyle.getPropertyValue("font-size"));
+        const regionMaxHeight = regionFontSize * LINEHEIGHT * 2;
+        // The below line was necessary when the avatar size was defined in user/component;
+        //  the number 46px seemed to have determinied by the avatar size.
+        //  After the avatar size became not hard-coded, the regionHeight is regionFontSize * LINEHEIGHT * (number of lines)
+        //regionMaxHeight = regionMaxHeight < 46 ? 46 : regionMaxHeight;
+        const inset = `inset(${regionHeight > regionMaxHeight ? regionHeight-regionMaxHeight : 0}px 0px 0px 0px)`;
+        //console.log("CapRender", regionHeight, regionFontSize, regionMaxHeight, inset);
+        captionWindow.style.clipPath = inset;
+      }
       this.resetTimer();
       this.timer = setTimeout(() => this.setState({ clear: true }), CAPTIONS_CONFIG.time);
     }
@@ -56,6 +74,8 @@ class LiveCaptions extends PureComponent {
       fontSize,
       background: backgroundColor,
       color: fontColor,
+      //clipPath: inset, -> set later at componentDidUpdate
+      lineHeight: LINEHEIGHT,
     };
 
     const visuallyHidden = {
@@ -71,7 +91,7 @@ class LiveCaptions extends PureComponent {
 
     return (
       <div>
-        <div style={captionStyles}>
+        <div style={captionStyles} id='caption-window'>
           {clear ? '' : data}
         </div>
         <div