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;
}

Answer 2

我认为您需要使用JavaScript。

这是我的解决方案，使用jQuery检查长度，如果超过20

则替换

if ($("#myspan").html().length > 20) {
  short_text = $("#myspan").html().substr(0, 20);
  $("#myspan").html(short_text + "...");
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<span>This is some text that really should be shorter. I hope it gets reduced</span>
<br>
<span id="myspan">This is some text that really should be shorter. I hope it gets reduced</span>

Answer 3

将范围更改为[display：inline-block]并使用[text-overflow：ellipsis]和[overflow：hidden; white-space：nowrap; vertical-align：middle;]给它一个[max-width]

p {
  font: 16px/28px tahoma;
  color: #333;
}
p span {
  display: inline-block;
  max-width: 100px;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  vertical-align: middle;
}

<p>
  Lorem ipsum dolor sit amet, ex vel <span>doming splendide aliquando. Mei petentium scripserit cu.</span> Vim ferri tantas ne. Ad laudem doming inimicus pri, cum minimum adversarium te. Enim dicit id sit, magna dicit omnium et vix.
</p>

如何限制范围

3 个答案: