diff --git a/module/doc/css/view.css b/module/doc/css/view.css
index 10b71539f8..8e2aca56cd 100644
--- a/module/doc/css/view.css
+++ b/module/doc/css/view.css
@@ -25,7 +25,6 @@
 .article-content .info .keywords .label {padding-right:8px; padding-left:8px; color:#18A6FD; border-color:rgba(24, 166, 253, 0.25); height:22px; line-height:14px; margin-right:4px;}
 
 .article-content {width: 100%; display: inline-block;}
-/* .outline-toggle i.icon-angle-right, i.icon-angle-left {width: 18px; height: 18px; border-radius: 50%; position: absolute; padding-left: 2px; padding-top: 1px;} */
 .outline-toggle {position: absolute; right: 20px; top: 50px;}
 .outline-toggle i.icon-angle-right:before {content: "\e314"; cursor: pointer;}
 .outline-toggle i.icon-angle-left:before {content: "\e315"; cursor: pointer;}
@@ -65,8 +64,9 @@
 .info .version, .info .crumbs {float: left;}
 .crumbs img {margin-right: 3px; margin-bottom: 4px;}
 .crumbs {float: left; display: flex;height: 32px; width: 670px; align-items: center; overflow: hidden;}
-.crumbs a {padding: 6px 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
-.crumbs .separator {flex: 0 0 15px; display: flex; justify-content: center; align-items: center;}
-.crumbs :last-child {flex: none;}
-
+.crumbs .crumb-item {padding: 6px 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: none; display: flex;}
+.crumb-item .separator {flex: 0 0 15px; display: flex; justify-content: center; align-items: center;}
+.crumb-item a {flex: none}
 .main-col {position: relative;}
+#autoBox {display: flex; overflow: hidden; text-overflow: ellipsis; padding-right: 15px; position: relative;}
+#autoBox > .ellipsis {position: absolute; top: 3px; right: 0; width: 10px; background: #F4F5F7; height: 100%;}
diff --git a/module/doc/js/common.js b/module/doc/js/common.js
index 6fd2a0f58f..a52e829cc1 100644
--- a/module/doc/js/common.js
+++ b/module/doc/js/common.js
@@ -402,20 +402,23 @@ function submit(object)
 function updateCrumbs()
 {
     var $crumbs       = $('#crumbs');
-    var $crumbItems   = $('#crumbs > a');
+    var $crumbItems   = $('#crumbs > .crumb-item');
     var crumbMaxWidth = 660;
     if($crumbs.width < crumbMaxWidth || $crumbItems.length == 1) return;
 
     /* last crumbItem width major */
     var $lastChild = $($crumbItems[$crumbItems.length -1]);
-    var $separator = "<div class='separator'> > </div>"
-    var $ellipsis  = "<div class='ellipsis'> ... </div>"
-    if($lastChild.width() > $crumbs.width())
+    var widthSum = 0 + $lastChild.width();
+    for(var i = 0; i < $crumbItems.length - 1; i++)
     {
-        var $appendChild = $lastChild[0];
-        $crumbs.empty();
-        $crumbs.append($appendChild);
-        $crumbs.prepend($separator);
-        $crumbs.prepend($ellipsis);
+        var crumbItem = $crumbItems[i];
+        var widthSum  = widthSum + $(crumbItem).width();
+        if(widthSum >= crumbMaxWidth)
+        {
+            $(crumbItem).addClass('in-auto-box');
+        }
     }
+    var $autoCrumbItems = $('#crumbs > .in-auto-box');
+    $lastChild.before('<div id="autoBox" class="flex-auto"><div class="ellipsis">...<div></div>');
+    $('#autoBox').prepend($autoCrumbItems);
 }
diff --git a/module/doc/view/view.html.php b/module/doc/view/view.html.php
index 162deb0470..5c7d3c8573 100644
--- a/module/doc/view/view.html.php
+++ b/module/doc/view/view.html.php
@@ -27,7 +27,12 @@
   <?php echo html::backButton("<i class='icon icon-back icon-sm'></i> " . $lang->goback, "id='backBtn'", 'btn btn-link')?>
   </div>
   <div id="crumbs" class="crumbs">
-    <?php echo implode('<div class="separator"> > </div>', $crumbs);?>
+    <?php foreach($crumbs as $crumbKey => $crumb):?>
+    <div class="crumb-item">
+    <?php if($crumbKey != 0) echo '<div class="separator"> > </div>'?>
+    <?php echo $crumb;?>
+    </div>
+    <?php endforeach;?>
   </div>
   <div class="btn-toolbar pull-right">
     <?php