diff --git a/module/doc/css/view.css b/module/doc/css/view.css
index da9ce2cd3f..3f22bb7372 100644
--- a/module/doc/css/view.css
+++ b/module/doc/css/view.css
@@ -1,15 +1,19 @@
 .h-full-adjust {overflow-y: auto; height: calc(100vh - 125px);}
 .main-col .block-files .panel-heading {padding-right: 20px;}
 .main-col .block-files .panel-heading .panel-title {height: 35px; line-height: 30px;}
-.main-col .doc-title {display: flex; font-size: 16px; margin-bottom: 10px; justify-content: space-between;}
+
+/* css for page-title .*/
+.main-col .doc-title {display: flex; font-size: 16px; margin-bottom: 10px; justify-content: space-between; width: 100%;}
+.main-col .doc-title .info {flex: 0 0 60px;}
 .main-col .doc-title .title {margin-right: 10px; line-height: 32px; font-size: 20px;}
-.main-col .doc-title .info {flex: 1 1 0;}
 .main-col .doc-title .version a {font-size: 13px; color: #8c8c8c;}
 .main-col .doc-title .version .dropdown-menu a:hover {color: #ffffff;}
+.main-col .doc-title .actions {flex: 0 0 165px;}
 .main-col .doc-title .actions a + a {margin-left: 0px;}
 .main-col .doc-title .actions i {font-size: 15px; color: #8c8c8c;}
-#content .title {max-width: 40%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
 .main-col .doc-title .actions a > span {color: #9EA3B0;}
+
+#content .title {overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
 #mainContent .scrollbar-hover {max-height: 2000px; overflow: scroll;}
 #content .editor-preview {background: #fff}
 #content .CodeMirror{border: none}
@@ -24,10 +28,11 @@
 .article-content .info {margin-bottom: 15px; width:100%; overflow:hidden;}
 .article-content .info .user-time{margin-right: 4px}
 .article-content .info .keywords .label {padding: 2px 8px; color:#18A6FD; border-color:rgba(24, 166, 253, 0.25); height: 18px; line-height:14px; margin-right:4px;}
-
 .article-content {width: 100%; display: inline-block;}
 .article-content img {margin: 0;}
 .article-content.comment .comment-content {width: 94%;}
+
+/* css for outlineMenu .*/
 #outlineMenu {max-width: 200px; overflow-x: auto;}
 #outlineMenu .tree li > a {text-overflow: clip;}
 .outline-toggle i.icon-angle-right:before {content: "\e314"; cursor: pointer;}
@@ -71,10 +76,11 @@
 #autoBox > .ellipsis {position: absolute; top: 3px; right: 0; width: 10px; background: #F4F5F7; height: 100%;}
 .detail+.detail {padding-top: 0;}
 .comment-edit-form .form-actions {display: flex;}
-
+#diffContain > .main-content::-webkit-scrollbar,
 #content .detail-content.article-content::-webkit-scrollbar,
 #outlineMenu::-webkit-scrollbar,
 #history::-webkit-scrollbar {height: 0px; width: 0px; background: transparent;}
+#diffContain > .main-content::-moz-scrollbar,
 #content .detail-content.article-content::-moz-scrollbar,
 #outlineMenu::-moz-scrollbar,
 #hostory::-moz-scrollbar {height: 0px; width: 0px; background: transparent;}
@@ -109,3 +115,5 @@
 .exchangeDiffGroup.show-diff .right-dom {display: unset;}
 .btn-limit {padding-left: 10px; padding-right: 20px;}
 .tree li>.list-toggle {top: 5px; left: -4px;}
+.flex-left {display: inline-flex; flex: auto}
+
diff --git a/module/doc/js/view.js b/module/doc/js/view.js
index 7ba73001f4..2a2558ed23 100644
--- a/module/doc/js/view.js
+++ b/module/doc/js/view.js
@@ -95,6 +95,7 @@ function fullScreen()
     }
 
     $('.main-col iframe').css('min-height', $(window).height() + 'px');
+    adjustPageTitleWidth();
 }
 
 /**
@@ -112,6 +113,20 @@ function exitFullScreen()
     $('#content .detail').eq(1).removeClass('hidden');
     $('.main-col iframe').css('min-height', '380px');
     $.cookie('isFullScreen', 0);
+    adjustPageTitleWidth();
+}
+
+/**
+ * Adjust title width.
+ *
+ * @access public
+ * @return void
+ */
+function adjustPageTitleWidth()
+{
+    var $titleContent = $('.detail-title.doc-title');
+    var titleWidth    = $titleContent.width() - $titleContent.find('.info').width() - $titleContent.find('.actions').width() - $titleContent.find('#editorBox').width();
+    $titleContent.find('.flex-left > .title').css('max-width', '0 0' + titleWidth + 'px');
 }
 
 document.addEventListener('fullscreenchange', function (e)
@@ -188,10 +203,12 @@ $(function()
             $history.addClass('hidden');
             $icon.removeClass('text-primary');
         }
+        adjustPageTitleWidth();
     }).on('click', '#closeBtn', function()
     {
         $('#history').addClass('hidden');
         $('#hisTrigger').removeClass('text-primary');
+        adjustPageTitleWidth();
     });
 
     $('#outline li.has-list').addClass('open in');
@@ -233,4 +250,6 @@ $(function()
     $('#history').find('.btn.pull-right').removeClass('pull-right');
     if($('.files-list').length) $('#content .detail-content.article-content').css('height', 'calc(100vh - 300px)');
     $('.outline .outline-toggle i.icon-menu-arrow-left').trigger("click");
+    adjustPageTitleWidth();
+}
 })
diff --git a/module/doc/view/content.html.php b/module/doc/view/content.html.php
index c02fcdb47d..7a526dd8ce 100644
--- a/module/doc/view/content.html.php
+++ b/module/doc/view/content.html.php
@@ -5,13 +5,13 @@
     <div class="cell" id="content">
       <div class="detail no-padding">
         <div class="detail-title no-padding doc-title">
+          <div class="flex-left">
           <div class="title" title="<?php echo $doc->title;?>">
             <?php echo $doc->title;?>
             <?php if($doc->deleted):?>
             <span class='label label-danger'><?php echo $lang->doc->deleted;?></span>
             <?php endif;?>
           </div>
-
           <?php if($doc->status != 'draft'):?>
           <div class="info">
             <?php $version = $version ? $version : $doc->version;?>
@@ -38,8 +38,7 @@
             </div>
           </div>
           <?php endif;?>
-
-
+          </div>
           <div class="actions">
             <?php echo html::a("javascript:fullScreen()", '<span class="icon-fullscreen"></span>', '', "title='{$lang->fullscreen}' class='btn btn-link fullscreen-btn'");?>
             <?php if(common::hasPriv('doc', 'collect')):?>