Bootstrap 3 tronquer long texte à l'intérieur des lignes d'une table dans un réactif de façon

Je suis en utilisant bootstrap 3 tables, quand j'ai mis la taille du texte dans la table, il s'amalgament sur plusieurs lignes, mais je veux qu'il soit tronqué avec les trois points à la fin dans un réactif sans gâcher la disposition de la table (j'ai trouvé des solutions, mais avec des effets désagréables).

Est-ce possible ? comment ?

PS: toute solution est la bienvenue, mais je voudrais qu'il soit juste en HTML/CSS si c'est possible.

InformationsquelleAutor Xsmael | 2014-05-02
  1. 26

    J'ai fait de cette façon (vous devez ajouter une classe texte à <td> et de mettre le texte entre un <span>:

    HTML

    <td class="text"><span>looooooong teeeeeeeeext</span></td>

    SASS

    .table td.text {
    max-width: 177px;
    span {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        display: inline-block;
        max-width: 100%;
    }
}

    CSS équivalent

    .table td.text {
    max-width: 177px;
}
.table td.text span {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: inline-block;
    max-width: 100%;
}

    Et il sera toujours mobile responsive (de l'oublier avec layout=fixe) et la volonté de conserver l'original de comportement.

    PS: bien sûr 177px est une taille personnalisée (mettre tout ce que vous avez besoin).

    • J'ai dû passer à display: block pour enlever un petit peu de blanc que cela ajouté au bas de la ligne du tableau. Voir stackoverflow.com/questions/45588761/...
    • La solution est-elle possible sans la définition d'une largeur max, mais avec de prendre le reste de l'espace disponible?
    • Si vous voulez dire avec des cols en "auto" (largeur), je crains que non, sinon le navigateur ne sait pas quand le texte sera tronqué. Je ne suis pas un CSS expert (je suis principalement un dev) mais je pense que je ne suis pas mauvais à ce. D'autre part, si vous avez fixé le wdth de X - 1 cols (comme 3 de 4), il peut être possible je pense, mais je pense que le conteneur (tableau peut-être) doivent avoir une largeur spécifique, quelque part. Je ne peux pas vous aider, désolé.
    • Logiquement penser, le navigateur sait de combien d'espace dont il a besoin pour la colonne A pour s'adapter à tout l'intérieur de la colonne. Compte tenu de la largeur de l'écran, il sait de combien d'espace il a à gauche de la colonne B et tronque le texte en conséquence, si le texte dans la colonne B dépasse la largeur. Merci quand même. Espérons-le, un CSS à l'exportation de houblon de long et peut répondre à cette question.
    • si vous êtes à la réussite de cette, s'il vous plaît laissez-nous savoir comment vous avez fait. Le navigateur sait sur les largeurs de tous les cols et organiser l'espace en fonction du contenu. Le navigateur ne sais pas quelle est la limite à montrer "..." sauf si vous définissez la largeur du conteneur parent. Donc, si vous mettez 3 à 4 col largeurs, alors j'imagine que ça va être en mesure de dépouiller le contenu si un conteneur parent a été définie avec une largeur fixe. C'est à dire: (100 largeur de la table, col1=25, col2=25, col3=25, col 4=non-spécifiée, 100-25*3=25, et le navigateur sait le dernier col de la largeur).
    • Pour nous, il est facile de voir un espace dans une colonne et de dire "il faut de bande à partir d'ici, c'est évident", mais le navigateur est en train de faire des maths avec des conteneurs de largeur, la longueur du contenu et de l'espace à l'écran, donc si personne ne dit "c'est de la largeur, afin d'arrêter et de bande à partir de là", il pourrait penser que vous voulez, disons, un défilement horizontal de la table (juste un exemple, c'est plus compliqué que cela). C'est ma modeste compréhension sur ce.

    InformationsquelleAutor Luciano Fantuzzi
  2. 61

    Vous devez utiliser table-layout:fixed pour CSS points de suspension pour les travaux sur les cellules de la table.

    .table {
  table-layout:fixed;
}

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

    démo: http://bootply.com/9njmoY2CmS

    • j'ai déjà essayer ce; le problème est que le tableau de mise en page ne sera pas agréable, le tout à l'aide de la colonne ont la même largeur, ce que je trouve injuste, j'en ai même parlé sur mon post!
    • bootstrap utilisé pour allouer la largeur de chaque colonne en fonction de son contenu d'une manière très belle, et je veux garder cet effet, autant que possible,
    • Je seconde Xsmael point ici. Disposition fixe n'est pas un correctif pour cela.
    InformationsquelleAutor Zim
  3. 2

    C'est ce que j'ai accompli, mais avait pour régler la largeur, et il ne peut pas être percentual.

    CSS:

    .trunc{
  width:250px; 
  white-space: nowrap; 
  overflow: hidden; 
  text-overflow: ellipsis;
}
table tr td {
padding: 5px
}
table tr td {
background: salmon
}
table tr td:first-child {
background: lightsalmon
}

    HTML:

    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<table>
      
      <tr>
        <td>Quisque dignissim ante in tincidunt gravida. Maecenas lectus turpis</td>
      <td>
         <div class="trunc">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
         </div>
    </td>
        </tr>
      </table>

    ou ceci: http://collaboradev.com/2015/03/28/responsive-css-truncate-and-ellipsis/

    InformationsquelleAutor egidiocs
  4. 2

    Je suis en utilisant bootstrap.

    J'ai utilisé le css paramètres.

    .table {
  table-layout:fixed;
}

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

    et bootstrap système de grille de paramètres, comme ceci.

    <th class="col-sm-2">Name</th>

<td class="col-sm-2">hoge</td>
    InformationsquelleAutor Yusuke Okui