I puntini di sospensione del testo di BootStrap Table non possono essere con il web reattivo?

Question

Sto tentando di implementare i puntini di sospensione nel tag Tabella.

Il codice sorgente è di seguito.

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

Questo codice funziona e se stringa è troppo lungo mostra ... quello che mi aspettavo.

Tuttavia, quando eseguo il test di risposta diventa brutto.

Ho scritto la seguente parte per esprimere la data di registrazione dell'articolo.

Ma quando il browser si riduce, la sua parte posteriore non viene visualizzata sullo schermo.

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

Come posso utilizzare i puntini di sospensione in Bootstrap in tutti i browser?

---

in modo che appaia come questo modo

Quello che mi aspettavo (quando il browser shrink) >>

colonna 1/colonna 2

AAAA ..../2014-09- 24

Che ora sembra >>

colonna 1/colonna 2

AAAA ..../2014-09

Il problema è >>

Prima aggiungo funzione puntini di sospensione String funziona reattivo.

mia ipotesi >>

Forse stile è la causa. ma non so come implementare la funzione di ellissi di stringa senza table-layout.

Spero che diventa più chiaro di quanto ho chiesto prima io: D

---

ho avuto la causa

Il problema è la larghezza: 80%, width: 20%, table-layout:fixed.

Così, quando ridimensiono il browser, sono necessarie le seguenti opzioni.

Ma ancora non so come sostituirlo.

Tutti questi sono in un div che è piccola parte del sito web e voglio web reattivo.

---

Modificato dopo scegliere una risposta.

Grazie per aver risposto alla mia domanda!

Tuttavia ho trovato la causa, ma non ho potuto risolvere questo problema.

La risposta scelta non era pertinente, tuttavia era utile.

Il mio problema non era il bootstrap, ma la larghezza.

Anche se utilizzando la libreria web reattivo,

non può essere sensibile se si utilizza la larghezza con % o px proprietà.

Answer 1

devi applicare questo stile per tutti gli elementi di ellissi.

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

Answer 2

Il 20% è un suggerimento, il layout della tabella lo ignorerà. Posiziona un div con una larghezza appropriata (o larghezza massima) all'interno della cella della tabella e posiziona il testo all'interno di quel div.

Answer 3

Grazie a this post, abbiamo trovato una soluzione semiadatta senza bisogno di una tabella fissa, quindi molto reattiva. Ho provato su FF 43, Opera 34 e Chrome 47):

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

Tuttavia, se alcuni dati è già presente nella cella, sarà passare alla riga successiva ...

Answer 4

Se sei utilizzando bootstrap è possibile utilizzare la classe text-nowrap con solo due queste proprietà di stile style="overflow: hidden;text-overflow: ellipsis;"

esempio completa:

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