如何限制跨度文本

Question

我有一个用html/js创建的树视图.显示文本的元素是范围.

我想限制跨度的宽度,因为有时文本很长.例如,我想只显示前20个字符.如果长于此值,则显示省略号.

所以我尝试设置最大宽度,但是这不符合跨度.

如果我将跨度更改为div,它可以工作,但它完全改变了树视图的布局.

有没有办法实现这个目标？(我在下面放了'LIMIT TEXT HERE'来显示限制范围.)

<ul class="tree-view-list">
        <li class="node-item">
            <i click.delegate="toggleItems(item)"
               if.bind="item.nodeAspect.isExpanded && item.children.length > 0"
               class="icon sf-icon-chevron-down p-r-half grow chevron"
               aria-hidden="true"></i>
            <i click.delegate="toggleItems(item)"
               class="icon sf-icon-chevron-right p-r-half grow chevron"
               if.bind="!item.nodeAspect.isExpanded && item.children.length > 0"
               aria-hidden="true"></i>



            <div if.bind="item.nodeAspect.isEditing">
                <form>
                    <input blur.trigger="saveEdit(item)" attach-focus="true" type="text" value.bind="item.name">
                    <button style="display: none" click.delegate="saveEdit(item)"></button>
                </form>
            </div>

            <span class="e-treeview">

                <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)">
                    <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)">
                          <i class="tree-view-icon sf-icon-${item.itemType.icon}"></i> ${item.name}  LIMIT TEXT HERE
                    </span>

                </span>
            </span>
            <compose if.bind="item.nodeAspect.isExpanded" repeat.for="item of item.children" view="./tree-view.html"></compose>

        </li>
    </ul>

Answer 1

一般来说(简化),你应该设置width限制(也min-width适用).

对于要支持的宽度,display应该是block或inline-block.

你应该告诉元素隐藏overflow(overflow: hidden).

并告诉它把它ellipsis作为text-overflow.

并且为了防止文本被包装,您应该white-space: nowrap将其保持在一行上.

内联块是您的树视图的选项吗？

像这样:

.node-text {
  display: inline-block;
  width: 10em;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}