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

标签： javascripthtmlcss

Answer 1

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

通常，如果你给span一个块布局（设置display为inline-block、等）和宽度（除了 之外block的几乎任何东西），省略号就会生效。 auto

<td>但是，元素是特殊情况。这在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>