#921 Ellipsis on text, not on image

metasfresh · Jun 29, 2017 · fc45473 · fc45473
1 parent 8d43ddf
commit fc45473
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 2 deletions.
diff --git a/src/assets/css/header.css b/src/assets/css/header.css
@@ -171,6 +171,14 @@
     display: block;
 }
 
+.subheader-title {
+    text-overflow: ellipsis;
+    overflow: hidden;
+    display: inline-block;
+    width: calc(100% - 2rem);
+    line-height: 1.1rem;
+}
+
 .subheader-column {
     width: 50%;
     border-right: 1px solid #e1e7ec;
@@ -256,7 +264,6 @@
 
 .subheader-header {
     white-space: nowrap;
-    text-overflow: ellipsis;
     overflow: hidden;
     padding: .75rem 1.25rem;
     color: $brand-color-primary;

diff --git a/src/components/header/SubHeader.js b/src/components/header/SubHeader.js
@@ -183,7 +183,7 @@ class Subheader extends Component {
                         transparentBookmarks={!!siteName}
                         updateData={this.handleUpdateBreadcrumb}
                     >
-                        <span>
+                        <span className="subheader-title">
                             {currentNode ? currentNode.caption : siteName}
                         </span>
                     </BookmarkButton>