diff --git a/web/css.stylus/_navigation.styl b/web/css.stylus/_navigation.styl
index 27bffc1..ca5ef6b 100644
--- a/web/css.stylus/_navigation.styl
+++ b/web/css.stylus/_navigation.styl
@@ -248,18 +248,25 @@ dataFieldsIconLink()
     display block
     width 20px
     height 20px
-    float right;
-    top 3px !important;
-    background transparent url("../images/icon-filter.png") no-repeat 0 0 !important;
+    float right
+    top 3px !important
+    background transparent url("../images/icon-filter.png") no-repeat 0 0 !important
   .selectable
     display block
     width 20px
     height 20px
-    float right;
-    top 3px !important;
-    background transparent url("../images/icon-checkboxes.png") no-repeat 0 0 !important;
+    float right
+    top 3px !important
+    background transparent url("../images/icon-checkboxes.png") no-repeat 0 0 !important
   .filter-active
-    background-position 0 -20px !important;
+    background-position 0 -20px !important
+  li
+    width 250px
+    height 20px
+    overflow hidden
+    text-overflow ellipsis
+    white-space nowrap
+
 /*
 #reports
   box()
diff --git a/web/css/index.css b/web/css/index.css
index 105c9dd..f91b896 100644
--- a/web/css/index.css
+++ b/web/css/index.css
@@ -984,6 +984,14 @@ nav {
 #data-fields .filter-active {
   background-position: 0 -20px !important;
 }
+#attributes li,
+#data-fields li {
+  width: 250px;
+  height: 20px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
 section#active-rule {
   position: relative;
 }
diff --git a/web/js/lib/UITemplateRegistrator.js b/web/js/lib/UITemplateRegistrator.js
index c6fcb4e..246e590 100644
--- a/web/js/lib/UITemplateRegistrator.js
+++ b/web/js/lib/UITemplateRegistrator.js
@@ -34,7 +34,7 @@ var UITemplateRegistrator = new Class({
 
       li({'class': className},
         a({href: '#', id: attribute.getCSSAddID(), class: 'add', title: i18n.translate('Add attribute')}),
-        span({id: attribute.getCSSID()}, attribute.getName()),
+        span({id: attribute.getCSSID(), title: attribute.getName()}, attribute.getName()),
         showRemoveAttribute ? a({
           href: '#',
           id: attribute.getCSSRemoveID(),
@@ -63,7 +63,7 @@ var UITemplateRegistrator = new Class({
       li({id: field.getCSSID()},
           input({type:'checkbox',id:field.getCSSCheckboxID(), class:'data-field-checkbox', 'data-id': field.getName()}),
         a({href: '#', id: field.getCSSAddID(), class: 'add', title: i18n.translate('Add to attributes')}),
-        span(field.getName()),
+        span({title: field.getName()}, field.getName()),
         a({
           href: '#',
           id: field.getCSSShowHistogramID(),