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

【问题标题】：How to crop the test properly using ellipsis如何使用省略号正确裁剪测试
【发布时间】：2013-03-06 19:50:28
【问题描述】：

我有一个如下的html：

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

</td>

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

【问题讨论】：

【解决方案1】：

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

【讨论】：

【解决方案2】：

要使text-overflow:ellipsis; 起作用，您还需要指定overflow: hidden; 和white-space: nowrap;。

即

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

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

【讨论】：

【解决方案3】：

应该是：-

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

【讨论】：