CODEWITHSUNDEEP
htmlcss
Greg Gum
Greg Gum

Reputation: 37909

How to limit text of span

I have a treeview created with html/js. The element that displays the text is a span.

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.

So I have tried setting a max-width, but this is not respected for a span.

If I change the span to a div, it works, but it completely changes the layout of the treeview.

Is there some way to achieve this? (I put 'LIMIT TEXT HERE' in the below to show the span to be limited.)

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

Upvotes: 2

Views: 13041

Answers (3)

Simon
Simon

Reputation: 2423

In general (simplified), you should put a width restriction (min-width works too).

For the width to be supported, the display should be block or inline-block.

You should tell the element to hide the overflow (overflow: hidden).

And tell it to put the ellipsis as text-overflow.

And in order to prevent the text from wrapping, you should white-space: nowrap to make it hold on a single line.

Is the inline-block an option for your treeview ?

Like this:

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

Upvotes: 7

Abdullah Ramadan
Abdullah Ramadan

Reputation: 182

change the span to [display:inline-block] and give it a [max-width] with [text-overflow:ellipsis] and [overflow: hidden;white-space: nowrap;vertical-align: middle;]

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>

Upvotes: 1

Brad
Brad

Reputation: 8668

I think you will need to use JavaScript for that.

Here is my solution using jQuery to check the length and replace if over 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>

Upvotes: 2

Related Questions