BootStrap Table text ellipsis can not be with responsive web?

Question

I am trying to implement String ellipsis in the Table tag.

The source code is below.

<div>
  <div class="widget-body no-padding" style="min-height:0px;">
    <table class="table" style="table-layout: fixed;">
      <tbody>
        <c:forEach var="item" items="${result.stuffList}" varStatus="idx">
          <c:if test="${idx.index < 5}">
            <tr>
              <td class='text-center' style="width: 80%; text-overflow:ellipsis; -o-text-overow: ellipsis; word-wrap:normal; overflow: hidden;">
                <nobr>
                  <a href="#" onclick="javascript:location.href='/view?nid=${item.id}'">${item.name}</a>
                </nobr>
              </td>
              <td class='text-center' style="width: 20%;">
                ${item.regDate}
              </td>
            </tr>
          </c:if>
        </c:forEach>
      </tbody>
    </table>
  </div>
</div>

This code works and if String is too long it shows ... what I expected.

However, when I test responsive it becomes ugly.

I wrote following part to express item registration date.

But when browser shrinks, its back part does not showed up in screen.

<td class='text-center' style="width: 20%;">
  ${item.regDate}
</td>

How can I use ellipsis in Bootstrap in all browser?

---

So it appears like this way

What I expected(when shrink browser) >>

column 1 / column 2

AAAA.... / 2014-09-24

What now looks like >>

column 1 / column 2

AAAA.... / 2014-09

The problem is >>

Before I add String ellipsis function it works responsive.

My guess >>

Maybe table-layout: fixed; style is the cause. but do not know how to implements String ellipsis function without table-layout.

I hope it becomes more clear than I asked first :D

---

I have got the cause

The problem is width : 80%, width: 20%, table-layout:fixed.

So when I resize the browser it takes these options for it.

But I still do not know how to replace it.

All of these are in a div which is small part of the web site and I want responsive web.

---

Edited after choose an answer.

Thanks for answering my question!

However I found the cause, but could not fix this.

The chosen answer was not relevant, however it was helpful.

My problem was not by bootstrap, but width.

Even though using responsive web library,

can not be responsive if you use width with % or px properties.

Answer 1

you have to apply this all style for ellipsis element.

{
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

Answer 2

Thanks to this post, found a half-working solution without needing a fixed table, so plenty responsive. I've tested it on FF 43, Opera 34 and Chrome 47):

.ellipis {
    overflow: hidden;
    -ms-text-overflow: ellipsis;
    -o-text-overflow: ellipsis;
    text-overflow: ellipsis;
    display: block;
    white-space: nowrap;
}

However, if some data is already present in cell, it will jump to next line...

Answer 3

If you are using bootstrap you can use the text-nowrap class with just two these style properties style="overflow: hidden;text-overflow: ellipsis;"

Full example:

<h3 class="text-nowrap" style="overflow: hidden;text-overflow: ellipsis;">