使用 span 来显示省略号而不是 div

Posted 2023-05-07

【中文标题】使用 span 来显示省略号而不是 div

【英文标题】：Use a span for showing the elipses instead of div

【发布时间】：2019-10-23 00:28:29

【问题描述】：

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

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

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

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

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

我必须为此使用 div。谁能帮助我如何使用 span 而不是 div？

【问题讨论】：

display:block 还是 inline-block？

@TemaniAfif 它必须是display: block

@xmaster 都接受溢出属性并且可以正常工作（例如：jsfiddle.net/euh6n20x）然后它将取决于代码，因为两者都不会给出相同的结果。

@TemaniAfif 嗯，你是对的

text-overflow: ellipsis not working的可能重复

【参考方案1】：

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

通常，如果你给span 一个块布局（将display 设置为inline-block、block 等等）和宽度（几乎任何东西除了 @987654329 @)，省略号就会出现。

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