diff --git a/src/assets/css/librarybrowser.css b/src/assets/css/librarybrowser.css
index 82e704f074..494a6c523d 100644
--- a/src/assets/css/librarybrowser.css
+++ b/src/assets/css/librarybrowser.css
@@ -1144,3 +1144,21 @@ div:not(.sectionTitleContainer-cards) > .sectionTitle-cards {
     margin-top: 0;
     font-size: 1.4em;
 }
+
+.overview-controls {
+    display: flex;
+    justify-content: flex-end;
+}
+
+.detail-clamp-text {
+    overflow: hidden;
+    display: -webkit-box;
+    -webkit-line-clamp: 12;
+    -webkit-box-orient: vertical;
+}
+
+@media all and (min-width: 40em) {
+    .detail-clamp-text {
+        -webkit-line-clamp: 6;
+    }
+}
diff --git a/src/controllers/itemDetails.js b/src/controllers/itemDetails.js
index 0fad1ba967..365cdaca5b 100644
--- a/src/controllers/itemDetails.js
+++ b/src/controllers/itemDetails.js
@@ -972,6 +972,19 @@ define(['loading', 'appRouter', 'layoutManager', 'connectionManager', 'userSetti
         }
     }
 
+    function toggleLineClamp(clampTarget, e) {
+        var expandButton = e.target;
+        var clampClassName = 'detail-clamp-text';
+
+        if (clampTarget.classList.contains(clampClassName)) {
+            clampTarget.classList.remove(clampClassName);
+            expandButton.innerHTML = globalize.translate('ShowLess');
+        } else {
+            clampTarget.classList.add(clampClassName);
+            expandButton.innerHTML = globalize.translate('ShowMore');
+        }
+    }
+
     function renderOverview(elems, item) {
         for (var i = 0, length = elems.length; i < length; i++) {
             var elem = elems[i];
@@ -980,6 +993,21 @@ define(['loading', 'appRouter', 'layoutManager', 'connectionManager', 'userSetti
             if (overview) {
                 elem.innerHTML = overview;
                 elem.classList.remove('hide');
+                elem.classList.add('detail-clamp-text');
+
+                // Grab the sibling element to control the expand state
+                var expandButton = elem.parentElement.querySelector('.overview-expand');
+
+                // Detect if we have overflow of text. Based on this StackOverflow answer
+                // https://stackoverflow.com/a/35157976
+                if (Math.abs(elem.scrollHeight - elem.offsetHeight) > 2) {
+                    expandButton.classList.remove('hide');
+                } else {
+                    expandButton.classList.add('hide');
+                }
+
+                expandButton.addEventListener('click', toggleLineClamp.bind(null, elem));
+
                 var anchors = elem.querySelectorAll('a');
 
                 for (var j = 0, length2 = anchors.length; j < length2; j++) {
diff --git a/src/itemdetails.html b/src/itemdetails.html
index 4d5cab026f..18de25845c 100644
--- a/src/itemdetails.html
+++ b/src/itemdetails.html
@@ -148,6 +148,9 @@
                             <p class="itemGenres"></p>
                             <h3 class="tagline"></h3>
                             <p class="overview"></p>
+                            <div class="overview-controls">
+                                <a class="overview-expand hide" is="emby-linkbutton" href="#">${ShowMore}</a>
+                            </div>
                             <p id="itemBirthday"></p>
                             <p id="itemBirthLocation"></p>
                             <p id="itemDeathDate"></p>
diff --git a/src/strings/en-us.json b/src/strings/en-us.json
index f26ba16c85..cbe2ae0683 100644
--- a/src/strings/en-us.json
+++ b/src/strings/en-us.json
@@ -1373,6 +1373,8 @@
     "Share": "Share",
     "ShowAdvancedSettings": "Show advanced settings",
     "ShowIndicatorsFor": "Show indicators for:",
+    "ShowLess": "Show less",
+    "ShowMore": "Show more",
     "ShowTitle": "Show title",
     "ShowYear": "Show year",
     "Shows": "Shows",