title: How to limit text of span
body: <p>I have a treeview created with html/js.  The element that displays the text is a span.</p>
  
  <p>I want to limit the width of the span, as sometimes the text is very long.  For example, I want to show the first 20 characters only.  If longer than that, show an ellipses.</p>
  
  <p>So I have tried setting a max-width, but this is not respected for a span.</p>
  
  <p>If I change the span to a div, it works, but it completely changes the layout of the treeview.</p>
  
  <p>Is there some way to achieve this? (I put 'LIMIT TEXT HERE' in the below to show the span to be limited.)</p>
  
  <pre><code>&lt;ul class="tree-view-list"&gt;
          &lt;li class="node-item"&gt;
              &lt;i click.delegate="toggleItems(item)"
                 if.bind="item.nodeAspect.isExpanded &amp;&amp; item.children.length &gt; 0"
                 class="icon sf-icon-chevron-down p-r-half grow chevron"
                 aria-hidden="true"&gt;&lt;/i&gt;
              &lt;i click.delegate="toggleItems(item)"
                 class="icon sf-icon-chevron-right p-r-half grow chevron"
                 if.bind="!item.nodeAspect.isExpanded &amp;&amp; item.children.length &gt; 0"
                 aria-hidden="true"&gt;&lt;/i&gt;
  
  
  
              &lt;div if.bind="item.nodeAspect.isEditing"&gt;
                  &lt;form&gt;
                      &lt;input blur.trigger="saveEdit(item)" attach-focus="true" type="text" value.bind="item.name"&gt;
                      &lt;button style="display: none" click.delegate="saveEdit(item)"&gt;&lt;/button&gt;
                  &lt;/form&gt;
              &lt;/div&gt;
  
              &lt;span class="e-treeview"&gt;
  
                  &lt;span if.bind="!item.nodeAspect.isEditing"
                        mouseover.delegate="onMouseOver(item)"
                        mouseout.delegate="onMouseOut(item)"
                        class="node-wrapper ${item.nodeAspect.isSelected ? 'node-is-selected e-active' : ''} ${item.nodeAspect.isHovering ? 'e-node-hover' : ''}"
                        click.delegate="nodeSelected(item)"
                        dblclick.delegate="nodeDoubleClick(item)"&gt;
                      &lt;span draggable="true"
                            class="node-text"
                            contextmenu.delegate="showContextMenu($event, item)"
                            dragstart.delegate="dragStart($event, item)"
                            dragover.delegate="dragOver($event, item)"
                            drop.delegate="drop($event,item)"&gt;
                            &lt;i class="tree-view-icon sf-icon-${item.itemType.icon}"&gt;&lt;/i&gt; ${item.name}  LIMIT TEXT HERE
                      &lt;/span&gt;
  
                  &lt;/span&gt;
              &lt;/span&gt;
              &lt;compose if.bind="item.nodeAspect.isExpanded" repeat.for="item of item.children" view="./tree-view.html"&gt;&lt;/compose&gt;
  
          &lt;/li&gt;
      &lt;/ul&gt;
  </code></pre>