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.

Renege

possible duplicate of CSS text-overflow in a table cell? – Scansorial

@torazaburo I think that is not. thanks though – Renege

Answer 1

you have to apply this all style for ellipsis element.

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

Sanches

Yep. I know. And it looks like 'white-space:nowrap' property can be replaced with <nobr> in <td> tag. My problem is when it performs bootstrap does not work in responsive way no more. for instance data like 'AAAAA...(1column)/2014-09(2column)' 2column has more data like '-24', but it is in out of screen. – Renege

I think 'table-layout:fixed;' is the main cause of this situation., but do not know how to handle this. Anyway Thanks for answer. I need to edit my post more specific so people can understand clearly – Renege

okay, you have accept my answer or not? if you satisfied than you can accept it. – Sanches

Can see this little bit more? I find the cause and your answer was very helpful, however I still suffered with this width things. so I want to wait little bit more if you are OK – Renege

This answer doesn't really address the problem. While you can use the style you provided to truncate some elements, it will not work with Bootstrap table elements, which is clearly mentioned in the description. – Weak

more generic version of this answer here: https://mcmap.net/q/432862/-how-to-avoid-text-overflow-in-twitter-bootstrap – Bonspiel

Any updates for 2018? this cannot be a solution to apply overflow hidden and ellipsis on everything in my page – Jud

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

Spume

This worked great for me - no issues and used it with bootstrap3. – Kiki

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

Muscadine

Answer 4

The 20% is a suggestion, table layout will ignore it. Place a div with an appropriate width (or max width) inside the table cell, and place the text inside that div.

Scansorial

I tried max width but it does not work too. I told my boss and he decided to ignoring this. Anyway, if your did not answer my question, I still do not know what is the cause. Thanks for helpful answer :D – Renege