html - 如何使用省略号正确裁剪测试

Question

我有一个如下的html：

<td>
                 <h6 style="width:80px;text-overflow:ellipsis;" title="${name}"><span class="badge badge-info">${name}</span></h6>

</td>

如果文本的大小大于显示区域，如何将文本显示为虚线。?

Answer 1

您必须添加overflow: hiddenfortext-overflow:ellipsis才能工作 - 否则内容只会从元素中流出而不会被切断。

Answer 2

为了text-overflow:ellipsis;工作，您还需要指定overflow: hidden;和white-space: nowrap;。

IE

... style="width:80px;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;" ...

顺便说一句，我建议您将该内联样式（和其他内联样式）移到 CSS 文件中。

Answer 3

它应该是 ：-

<td>
<h6 style="width:80px;text-overflow:ellipsis;overflow:hidden" title="${name}"><span class="badge badge-info">${name}</span></h6>
</td>