diff --git a/frontend/src/components/cur-dir-path/dir-path.js b/frontend/src/components/cur-dir-path/dir-path.js
index ba86066c6d..756011cddb 100644
--- a/frontend/src/components/cur-dir-path/dir-path.js
+++ b/frontend/src/components/cur-dir-path/dir-path.js
@@ -43,10 +43,10 @@ class DirPath extends React.Component {
       } else {
         nodePath += '/' + item;
         return (
-          <span key={index} >
+          <Fragment key={index} >
             <span className="path-split">/</span>
             <a className="path-link" data-path={nodePath} onClick={this.onPathClick}>{item}</a>
-          </span>
+          </Fragment>
         );
       }
     });
diff --git a/frontend/src/css/layout.css b/frontend/src/css/layout.css
index 6e84f4f9b8..3f494b35a3 100644
--- a/frontend/src/css/layout.css
+++ b/frontend/src/css/layout.css
@@ -286,3 +286,20 @@ img[src=""],img:not([src]){ /* for first loading img*/
   color: #999;
 }
 
+.path-container {
+  display: flex;
+  word-break: keep-all;
+  width: 90%;
+}
+.path-container a {
+  max-height: 50px;
+  overflow: hidden;
+  text-overflow:ellipsis;
+  white-space: nowrap;
+} 
+.path-container span, .path-container a {
+  flex-shrink: 1;
+} 
+.path-container span:first-child, .path-container span:last-child {
+  flex-shrink: 0;
+} 
diff --git a/frontend/src/pages/wiki/main-panel.js b/frontend/src/pages/wiki/main-panel.js
index 2e66391356..ec762916ff 100644
--- a/frontend/src/pages/wiki/main-panel.js
+++ b/frontend/src/pages/wiki/main-panel.js
@@ -57,7 +57,7 @@ class MainPanel extends Component {
       } else {
         nodePath += '/' + item;
         return (
-          <span key={index} >
+          <Fragment key={index} >
             <span className="path-split">/</span>
             <a 
               className="path-link" 
@@ -65,7 +65,7 @@ class MainPanel extends Component {
               onClick={this.onMainNavBarClick}>
               {item}
             </a>
-          </span>
+          </Fragment>
         );
       }
     });
@@ -116,7 +116,7 @@ class MainPanel extends Component {
         </div>
         <div className="main-panel-center">
           <div className="cur-view-path">
-            <div className="path-containter">
+            <div className="path-container">
               <a href={siteRoot + 'published/' + slug} className="normal">{slug}</a>
               {this.renderNavPath()}
             </div>