html - 如何限制跨度的文本

Question

我有一个用 html/js 创建的 TreeView 。显示文本的元素是一个跨度。

我想限制跨度的宽度，因为有时文本很长。例如，我只想显示前 20 个字符。如果比那长，显示一个省略号。

所以我尝试设置最大宽度，但这对于跨度来说是不受尊重的。

如果我将 span 更改为 div，它会起作用，但它会完全改变 treeview 的布局。

有什么办法可以实现吗？ (我在下面放了 '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让它保持在一行上。

内联 block 是您的 TreeView 的一个选项吗？

像这样:

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