CODEWITHSUNDEEP
javascripthtmlcss
SK.
SK.

Reputation: 1510

text-overflow:ellipsis doesn't work on in Table cell hyper links

Can anyone please help me in below issue. I have a table with some hyper links in once cell. I want to show 3 dots when the text exceeds to cell width. Basically I want to display only one link per line and if there is a long text in hyper link, it should not spill over to next line. Browser: 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>

enter image description here

Upvotes: 1

Views: 154

Answers (4)

piem
piem

Reputation: 1

I would write:

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

}

Upvotes: 0

Xenos
Xenos

Reputation: 3507

text-overflow only applies to block containers: https://drafts.csswg.org/css-ui-3/#text-overflow

a is not a block container: https://html.spec.whatwg.org/multipage/dom.html#phrasing-content-2

Simply make it a block with display: block;

Note that you'll also have to keep the table column narrow enough to have the ellipsis (max-width: 50px; instead of width:50px;)

Upvotes: 0

Chris
Chris

Reputation: 59491

If possible, wrap the contents of each cell in a div, and style that div instead. It would require some formatting on your table too, however.

Here's a demo:

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

Upvotes: 1

neeraj.sonar
neeraj.sonar

Reputation: 74

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

Add display block to the class secondColumn. this makes it a block element and takes the specified width and your ellipsis works.

Upvotes: 2

Related Questions