web-dev-qa-db-fra.com

BootStrap Texte du tableau Les points de suspension ne peuvent pas être avec le Web réactif?

J'essaie d'implémenter des points de suspension de chaîne dans la balise Table.

Le code source est ci-dessous.

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

Ce code fonctionne et si String est trop long, il affiche ... ce que j'attendais.

Cependant, lorsque je teste réactif, cela devient moche.

J'ai écrit la partie suivante pour exprimer la date d'enregistrement de l'article.

Mais lorsque le navigateur rétrécit, sa partie arrière ne s'affiche pas à l'écran.

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

Comment puis-je utiliser Ellipsis dans Bootstrap dans tous les navigateurs?

Donc ça ressemble à ça

Ce que j'attendais (quand rétrécir le navigateur) >>

colonne 1/colonne 2

AAAA ..../2014-09-24

À quoi ressemble maintenant >>

colonne 1/colonne 2

AAAA ..../2014-09

Le problème est >>

Avant d'ajouter la fonction String Ellipsis, cela fonctionne réactif.

Ma conjecture >>

Peut être table-layout: fixed; le style en est la cause. mais je ne sais pas comment implémenter la fonction String Ellipsis sans table-layout.

J'espère que cela deviendra plus clair que je ne l'avais demandé: D

J'ai la cause

Le problème est la largeur: 80%, width: 20%, table-layout:fixed.

Donc, lorsque je redimensionne le navigateur, il prend ces options pour lui.

Mais je ne sais toujours pas comment le remplacer.

Tous ces éléments sont dans une div qui est une petite partie du site Web et je veux un site Web réactif.

Modifié après avoir choisi une réponse.

Merci d'avoir répondu à ma question!

Cependant, j'ai trouvé la cause, mais je n'ai pas pu résoudre ce problème.

La réponse choisie n'était pas pertinente, mais elle était utile.

Mon problème n'était pas lié au bootstrap, mais à la largeur.

Même si vous utilisez une bibliothèque Web réactive,

ne peut pas être réactif si vous utilisez la largeur avec % ou px propriétés.

csstwitter-bootstrapcross-browserhtml-tableellipsis
19
Juneyoung Oh

vous devez appliquer tout ce style pour l'élément Ellipsis.

{
    white-space: nowrap;
    overflow: hidden;
    text-overflow: Ellipsis;
}
28
Darshak Shekhda

Merci à cet article , a trouvé une solution à moitié fonctionnelle sans avoir besoin d'une table fixe, donc très réactif. Je l'ai testé sur FF 43, Opera 34 et Chrome 47):

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

Cependant, si certaines données sont déjà présentes dans la cellule, elles passeront à la ligne suivante ...

5
Fabian

Si vous utilisez bootstrap vous pouvez utiliser le text-nowrap classe avec seulement deux de ces propriétés de style style="overflow: hidden;text-overflow: Ellipsis;"

Exemple complet:

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

2
Martin Kearn

Le 20% est une suggestion, la disposition du tableau l'ignorera. Placez un div avec une largeur appropriée (ou largeur maximale) à l'intérieur de la cellule du tableau et placez le texte à l'intérieur de ce div.

0
user663031