使用跨度显示elipses而不是div

Question

我试图使用跨度来溢出文本。

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

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

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

但它没有显示任何缺点。

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

Answer 1

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

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

<td>元素是特殊情况。 那就是在SO问题解释的更好TD宽度，不工作？ 。

 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>