Use a span for showing the elipses instead of div

Question

I am trying to use a span for the overflow of a text.

.jdName {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

<td>
    <span className="jdName">Some Name with more characters</span>
</td>

Here is the td has alreday a fixed width. So, I have not given for the span.

But it is not showing any elipses for this.

I have to use the div for this. Can any one help me how can I use span instead of using a div?

@xmaster both accept overflow properties and would work fine (ex: https://jsfiddle.net/euh6n20x/) then it will depend on the code because both will not give the same result. — Temani Afif, Jun 07 '19 at 13:47
Possible duplicate of [text-overflow: ellipsis not working](https://stackoverflow.com/questions/7993067/text-overflow-ellipsis-not-working) — Heretic Monkey, Jun 07 '19 at 14:00

Ito Pizarro · Answer 1 · 2019-06-07T13:55:25.670

There are two factors at play here. First, the <span> has inline layout; certain CSS properties don't apply to it by default. And, second, the <td> of a <table> has its own set of layout quirks.

Normally, if you give the span a block layout (set display to inline-block, block, et cetera), and width (of pretty much anything except auto), the ellipsis would kick in.

<td> elements are special cases, though. And that is explained better in the SO question td widths, not working?.

td,
.test-div {
  width: 100px;
}

.jdName {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
  width: 100%;
  border: 1px solid red;
}

<table>
  <tr>
    <td>
      <span class="jdName">Some Name with more characters</span>
    </td>
  </tr>
</table>

<div class="test-div">
  <span class="jdName">Some Name with more characters</span>
</div>

Use a span for showing the elipses instead of div

1 Answers1