text-overflow：省略号在表格单元格超链接中不起作用

Question

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

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

}

＆＃13;

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 1

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

将显示块添加到类secondColumn。这使它成为一个块元素，并采用指定的宽度，省略号也可以。

Answer 2

如果可能的话，将每个单元格的内容包装在div中，然后将该样式设置为div。但是，它也需要在你的桌子上进行一些格式化。

这是一个演示：

＆＃13;

＆＃13;

table {
  border: 1px solid;
  border-collapse: collapse;
  table-layout: fixed;
}

td,
th {
  border: 1px solid;
  max-width: 65px;
}

div {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  width: 100%;
}

＆＃13;

<table>
  <tr>
    <th>title 1</th>
    <th>title 2</th>
    <th>title 3</th>
  </tr>
  <tr>
    <td>
      <div>text</div>
    </td>
    <td>
      <div>text text</div>
    </td>
    <td>
      <div>text text text</div>
    </td>
  </tr>
</table>

＆＃13;

＆＃13;

＆＃13;

Answer 3

text-overflow仅适用于block个容器：https://drafts.csswg.org/css-ui-3/#text-overflow

a不是block容器：https://html.spec.whatwg.org/multipage/dom.html#phrasing-content-2

只需将其设为display: block;

即可

请注意，您还必须将表格列保持足够窄以获得省略号（max-width: 50px;而不是width:50px;）

Answer 4

我会写：

.secondColumn {
text-align: left;
/* width: 50px;*/
width: 150px;/* according to your given example*/
max-width: 150px;    

}