如何限制跨度的文本答案

【问题标题】：How to limit text of span如何限制跨度的文本
【发布时间】：2016-12-20 00:32:42
【问题描述】：

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

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

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

如果我将 span 更改为 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>

【问题讨论】：

标签： html css

【解决方案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;
}

【讨论】：

【解决方案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>

【讨论】：

我在寻找一个 css 答案，而不是 js 答案。

【解决方案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>

【讨论】：