javascript - 文本溢出 :ellipsis doesn't work on in Table cell hyper links

Question

任何人都可以帮助我解决以下问题。我有一个表格，在一个单元格中有一些超链接。当文本超过单元格宽度时，我想显示 3 个点。基本上我想每行只显示一个链接，如果超链接中有很长的文本，它不应该溢出到下一行。浏览器:IE

.foi_overlap_ink {
text-overflow: ellipsis;
word-break: keep-all;
white-space: nowrap;
overflow: hidden;

.foi_overlap_ink {
    text-overflow: ellipsis;
    word-break: keep-all;
    white-space: nowrap;
    overflow: hidden;
}

.firstColumn {
    text-align: left;
    width: 150px;
}

.secondColumn {
    text-align: left;
    width: 50px;
}

<table>
  <tr>
    
<TD class=firstColumn style="BORDER-TOP: #8f8f8f 1px solid; BORDER-RIGHT: #8f8f8f 1px solid; BORDER-BOTTOM: #8f8f8f 1px solid; BORDER-LEFT: #8f8f8f 1px solid"><B>Overlap Link</B></TD>
<TD class="secondColumn foi_overlap_ink" style="BORDER-TOP: #8f8f8f 1px solid; BORDER-RIGHT: #8f8f8f 1px solid; BORDER-BOTTOM: #8f8f8f 1px solid; BORDER-LEFT: #8f8f8f 1px solid">
<A style="OVERFLOW: hidden; FONT-SIZE: 12px; TEXT-DECORATION: underline; TEXT-OVERFLOW: ellipsis; COLOR: blue" href="javascript:repoTableDefaultDetails('123123123','2013-03-31','2016-10-05');">2013-03-31-2015 - bonappetit Condensat</A> 

<BR><A style="FONT-SIZE: 12px; TEXT-DECORATION: underline; COLOR: blue" href="javascript:repoTableDefaultDetails('123123123','2013-04-30','2016-03-07');">2013-04-30-DailyExcerise</A> 

<BR><A style="FONT-SIZE: 12px; TEXT-DECORATION: underline; COLOR: blue" href="javascript:repoTableDefaultDetails('123123123','2013-10-31','2016-03-07');">2013-04-30-DailyExcerise</A> 

<BR><A style="FONT-SIZE: 12px; TEXT-DECORATION: underline; COLOR: blue" href="javascript:repoTableDefaultDetails('123123123','2014-03-31','2016-03-07');">2013-04-30-DailyExcerise</A> 

<BR><A style="FONT-SIZE: 12px; TEXT-DECORATION: underline; COLOR: blue" href="javascript:repoTableDefaultDetails('123123123','2014-05-31','2016-03-07');">2013-04-30-DailyExcerise</A> 

<BR><A style="FONT-SIZE: 12px; TEXT-DECORATION: underline; COLOR: blue" href="javascript:repoTableDefaultDetails('123123123','2014-06-30','2016-03-07');">2013-04-30-DailyExcerise</A> 

<BR><A style="FONT-SIZE: 12px; TEXT-DECORATION: underline; COLOR: blue" href="javascript:repoTableDefaultDetails('123123123','2013-03-31','2016-03-07');">2013-04-30-DailyExcerise</A>

</TD>
</tr>
</table>

Answer 1

.secondColumn {
    text-align: left;
    width: 50px;
    display: block;
}

将显示 block 添加到类 secondColumn。这使它成为一个 block 元素并采用指定的宽度，并且您的省略号有效。