web-dev-qa-db-fra.com

Bootstrap 3 tronquer le texte long à l'intérieur des lignes d'un tableau de manière réactive

J'utilise bootstrap 3 tables, lorsque je mets du texte de grande taille dans la table, il est encapsulé sur plusieurs lignes, mais je veux qu'il soit tronqué de trois points à la fin de manière réactive sans gâcher la mise en page de la table (j'ai trouvé des solutions, mais avec des effets désagréables).

Est-ce possible ? Comment ?

PS: toutes les solutions sont les bienvenues, mais j'aimerais que ce soit uniquement HTML/CSS si c'est possible.

csshtml5css3twitter-bootstrap-3responsive-design
39
Xsmael

Je l’ai fait de cette façon (vous devez ajouter une classe text à <td> et mettez 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 réactif au mobile (oubliez-le avec layout = fixed) et conservera le comportement d'origine.

PS : Bien sûr 177px est une taille personnalisée (mettez ce dont vous avez besoin).

26
Luciano Fantuzzi

Vous devez utiliser table-layout:fixed afin de permettre à Ellipsis CSS de travailler sur les cellules du tableau.

.table {
  table-layout:fixed;
}

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

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

60
Zim

J'utilise bootstrap.
J'ai utilisé les paramètres CSS.

.table {
  table-layout:fixed;
}

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

et bootstrap les paramètres du système de grille, comme celui-ci.

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

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

C’est ce que j’ai réalisé, mais j’ai dû définir une largeur, et cela ne peut pas être un pourcentage.

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

2
egidiocs