javascript - 使用 span 代替 div 来显示省略号

Question

我正在尝试对文本溢出使用跨度。

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

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

这里是 td 已经有一个固定的宽度。所以，我没有给出跨度。

但是它没有为此显示任何省略号。

我必须为此使用 div。任何人都可以帮助我如何使用 span 而不是使用 div？

Answer 1

这里有两个因素在起作用。首先，<span>有内联布局；默认情况下，某些 CSS 属性不适用于它。其次，<td>的 <table>有自己的一套布局怪癖。

通常，如果您提供 span block 布局(将 display 设置为 inline-block 、 block 等等)和宽度( auto 除外)，省略号会出现。

<td>不过，元素是特例。 那个 在 SO 问题 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>