Comment gérer le débordement de contenu dans le tableau

Cette fois, je vais vous montrer comment gérer le débordement de contenu dans le tableau. Quelles sont les précautions pour gérer le débordement de contenu dans le tableau. Ce qui suit est un cas pratique, allons-y. jetez un oeil.

Qu'est-ce que le débordement de contenu ? En effet, lorsqu'il y a beaucoup de texte, si la zone de contenu est aussi longue, alors la partie supplémentaire sera remplacée par des points.

Le cas que nous faisons cette fois est dans un tableau. Nous savons que lorsque nous saisissons trop de texte dans le tableau, cela encombrera le tableau. Par exemple, une ligne est trop longue ou la ligne est automatiquement. enveloppé. Mais parfois on souhaite l'afficher dans une ligne avec une largeur fixe. Si la partie supplémentaire est remplacée par des points, cela n'encombrera pas le tableau. Alors que faire ?

De manière générale, nous utiliserons les attributs suivants

/*溢出部分样式*/  
.txt-ell {   
    whitewhite-space:nowrap;  //强制在一行显示   
    overflow:hidden;    //溢出的内容切割隐藏   
    text-overflow:ellipsis; //当内联溢出块容器时，将溢出部分替换为…   
    word-break:keep-all;  //允许在单词内换行   
    color: red;  //这里我自己标识一下   
    padding: 0 7px;  //由于想跟边线留有距离，所以设置了下   
}

.table-fix {   
    table-layout:fixed;     
}

Tout d'abord, le deuxième style est spécialement ajouté à la balise table Si vous souhaitez obtenir un débordement de contenu, la table doit avoir une largeur et une hauteur fixes, tr et td à l'intérieur de la table doivent également avoir une largeur et une hauteur fixes. Avant d'utiliser le débordement de contenu, vous devez d'abord ajouter la classe table-fix à la table. Vérifiez ensuite si vos tr et td ont donné une largeur. Sinon, il est préférable de leur donner une largeur fixe, ou un pourcentage. Je donne principalement un pourcentage, et le tableau extérieur a une largeur fixe, et les tr et td à l'intérieur. est le pourcentage de largeur pour que le style de débordement de contenu puisse être utilisé. Enfin, s'il y a beaucoup de contenu dans une grille et que vous souhaitez en réaliser un peu, ajoutez simplement une classe .txt-ell à cette grille

Je pense que vous maîtrisez la méthode après avoir lu ces cas, et il y aura des choses plus excitantes. Veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture connexe :

Connaissances de base HTML, introduction détaillée aux styles définis par les hyperliens

Résumé des connaissances des paragraphes HTML

Résumé des connaissances du format de texte HTML

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!