web-dev-qa-db-fra.com

Comment définir la hauteur maximale pour table-cellule?

J'ai une table-cellule avec une largeur et une hauteur fixes et si le texte est trop grand, la taille de la cellule doit rester identique et le texte doit être masqué par un dépassement de capacité: hidden.

div {
   display: table-cell
   height: 100px;
   width: 100px;
   overflow: hidden;
   vertical-align: middle;
}

Table-cell, cependant, s'étend au-delà de 100 px si trop de texte est ajouté. Des astuces pour l'empêcher de s'étendre?

Le texte doit comporter plusieurs lignes. La solution "espace-blanc: nowrap" ne s'applique pas.

htmlcsscss3
61
skyisred

Par Règles CSS 2.1 , la hauteur d'une cellule de tableau est «la hauteur minimale requise par le contenu». Ainsi, vous devez restreindre indirectement la hauteur en utilisant un balisage interne, normalement un élément div (<td><div>content</div></td>), et définir les propriétés height et overflow sur l'élément div (sans y placer display: table-cell, ce qui rendrait sa hauteur obéissante CSS 2.1 règles de la cellule de table).

126
Jukka K. Korpela

Je ne pense pas que la réponse acceptée résolve complètement le problème. Vous vouliez avoir un vertical-align: middle sur le contenu des cellules de la table. Mais lorsque vous ajoutez une div à l'intérieur de la cellule et que vous lui donnez une hauteur, le contenu de cette div interne sera au sommet. .__ Cochez cette jsfiddle . Le débordement: caché; fonctionne bien, mais si vous raccourcissez le contenu afin qu’il ne reste qu’une seule ligne, cette ligne ne sera pas centrée verticalement

La solution n'est pas d'ajouter un DIV dans la cellule de la table, mais plutôt à l'extérieur. Voici le code :

/* some wrapper */
div.d0 {
    background: grey;
    width:200px;
    height: 200px;
}

div.table {
    margin: 0 auto; /* just cosmetics */
    width: 150px;
    height: 150px;
    background: #eee;
    display: table;
}

div.tablecell {
    display: table-cell;
    vertical-align: middle;
    text-align:center;
    height: 100%;
    width: 100%;
    background: #aaa;
}

div.outer-div {
    height: 150px;
    overflow: hidden;
}
<div class="d0">
    <div class="outer-div">
        <div class="table">
            <div class="tablecell">
                Lorem ipsum 
                <!--dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren,-->
            </div>
        </div>
    </div>
</div>

7
beipawel

En css, vous ne pouvez pas définir la hauteur maximale des cellules de tableau. Si l'espace est vide, vous ne pouvez pas le casser avec la largeur maximale. La solution fonctionne donc avec JavaScript dans tous les navigateurs.

Donc, cela peut fonctionner pour vous.

For Limiter la hauteur maximale de toutes les cellules ou lignes du tableau avec Javascript:

Ce script convient aux tables de débordement horizontales.

Ce script augmente la largeur de la table de 300 px à chaque fois, jusqu'à 4 000 px jusqu'à ce que les lignes soient réduites à une hauteur maximale (160 px), et vous pouvez également modifier les nombres selon vos besoins.

var i = 0, row, table = document.getElementsByTagName('table')[0], j = table.offsetWidth;
while (row = table.rows[i++]) {
    while (row.offsetHeight > 160 && j < 4000) {
        j += 300;
        table.style.width = j + 'px';
    }
}

Source: Solution de table HTML - Limite de hauteur maximale pour les lignes ou les cellules en augmentant la largeur de la table, Javascript

1
Mr. Rick

Vous pouvez effectuer l'une des opérations suivantes:

  1. Utilisez l'attribut css "line-height" et définissez-le par ligne (), cela centrera aussi verticalement le contenu dans 

  2. Définissez l'attribut CSS "display" sur "block" et procédez comme suit:

td 
{
  display: block;
  overflow-y: hidden;
  max-height: 20px;
}

bonne chance!

1
Itamar

Essayez quelque chose comme ça: -

 table {
    width: 50%;
    height: 50%;
    border-spacing: 0;
    position:absolute;
}
td {
    border: 1px solid black;
}
#content {
    position:absolute;
    width:100%;
    left:0px;
    top:20px;
    bottom:20px;
    overflow: hidden;
}
1
Rahul Tripathi

Essayer

   <td style="Word-wrap: break-Word">Long text here</td>
0
vels4j

si vous utilisez display: table-cell, max-height ne fonctionnera pas pour div de ce style . La solution qui a fonctionné pour moi consiste donc à définir la hauteur maximale de div interne. 

<div class="outer_div" style="display:table">

    <div class="inner_div" style="display:table-cell">
        <img src="myimag.jpg" alt="" style="max-height:300px;width:auto"/>
    </div>
    <div class="inner_div" style="display:table-cell">
        <img src="myimag2.jpg" alt="" style="max-height:300px;width:auto"/>
    </div>

</div>
0
ahmed

Utilisez le style ci-dessous:

div {
  display: fixed;
  max-height: 100px;
  max-width: 100px;
  overflow: hidden;
}

Le HTML étant:

<div>
    your long text here
</div>
0
Rups