Added truncate option to editable label to auto truncate text when not editing. Also fixed a few styling issues.

editable-label.js

@@ -13,6 +13,7 @@ class EditableLabel extends IgniteElement {
                 display: flex;
                 flex-direction: row;
                 align-items: center;
+                justify-content: space-between;
                 border-radius: 0.3rem;
                 border: solid 0.13rem #ced4da;
                 padding: 0.4rem;
@@ -26,10 +27,21 @@ class EditableLabel extends IgniteElement {
                 border: solid 0.13rem rgba(0,0,0,0.1);
             }
 
+            mt-editable-label.truncate > div {
+                white-space: nowrap;
+                text-overflow: ellipsis;
+                overflow: hidden;
+            }
+
             mt-editable-label:hover {
                 cursor: pointer;
             }
 
+            mt-editable-label>div {
+                flex: 1;
+                word-break: break-word;
+            }
+
             mt-editable-label>div:focus {
                 outline: none;
             }
@@ -61,6 +73,7 @@ class EditableLabel extends IgniteElement {
             editing: false,
             value: null,
             multiLine: false,
+            truncate: false,
             saveButton: true,
             input: null,
             placeholder: null,
@@ -73,6 +86,7 @@ class EditableLabel extends IgniteElement {
             .attribute("tabindex", "0")
             .class(this.border, value => value ? null : "no-border")
             .class(this.editing, value => value ? "editing" : null)
+            .class([this.editing, this.truncate], (editing, truncate) => !editing && truncate ? "truncate" : null)
             .onFocus(e => this.onFocus())
             .child(
                 new div()