Dans le développement WEB front-end, nous rencontrons souvent un débordement de contenu en DIV, ce qui affecte la beauté de la page. Alors, comment masquer le débordement, je pense que tout le monde pensera certainement au débordement en CSS <.>, aujourd'hui je vais vous présenter l'explication détaillée du masquage de débordement (overflow) en CSS !
Description de l'attribut de débordement : Version : CSS2 Compatibilité : IE4+ NS6+ Héritage : Aucun Syntaxe :
overflow : visible | auto | hidden | scroll
visible : : Ne coupe pas le contenu et n'ajoute pas de barres de défilement. Si cette valeur par défaut est explicitement déclarée, l'objet sera découpé à la taille de la fenêtre ou du cadre contenant l'objet. Et le paramètre d'attribut de clip sera invalide.
auto : C'est la valeur par défaut de l'objet body et du textrea. Coupez le contenu et ajoutez des barres de défilement si nécessaire
masqué : Ne pas afficher le contenu qui dépasse la taille de l'objet.
défilement : affiche toujours les barres de défilement.
Instructions d'utilisation et points clés :
◎ Définir l'objet textarea sur la valeur cachée masquera ses barres de défilement.
◎ Pour table, si l'attribut
table-layout est défini sur fixe, l'objet td prend en charge l'attribut de débordement avec la valeur par défaut de caché. S'il est défini sur caché, défilement ou auto, le contenu dépassant la taille td sera coupé. S'il est défini sur visible, le texte supplémentaire débordera vers les cellules à droite ou à gauche de ◎ (selon le paramètre de l'attribut direction). ◎ À partir d'IE5, cette propriété est disponible sur la plateforme MAC. La fonctionnalité de script correspondante est le débordement.
body { overflow: hidden; }
div { overflow: scroll; height: 100px; width: 100px; }text-overflow Version : IE6+ Propriétés propriétaires Héritage : Aucun
div overflow caché div text Utiliser des points (points de suspension) au lieu de pour le débordement. Dans la disposition div, le contenu déborde du conteneur et dépasse la largeur limitée par le conteneur. J'étais très confus, alors je l'ai collecté et trié, et j'ai découvert que je pouvais faire en sorte que le contenu dépasse le conteneur pour afficher des ellipses. Cette approche résout non seulement le problème, mais est également très belle. Les amis intéressés peuvent s'y référer
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh">
<head profile="http://www.w3.org/2000/08/w3c-synd/#">
<meta http-equiv="content-language" content="zh-cn" />
<meta http-equiv="content-type" content="text/html;charset=gb2312" />
<title>div中溢出文字用点代替的代码</title>
<style type="text/css">
/*<![CDATA[*/
li {
width:200px;
white-space:nowrap;
text-overflow:ellipsis;
-o-text-overflow:ellipsis;
overflow: hidden;
}
/*]]>*/
</style>
</head>
<body>
<ul>
<li><a href="#">web标准常见问题大全web标准常见问题大全</a></li>
<li><a href="#">web标准常见问题大全web标准常见问题大全</a></li>
<li><a href="#">web标准常见问题大全web标准常见问题大全</a></li>
<li><a href="#">web标准常见问题大全web标准常见问题大全</a></li>
<li><a href="#">web标准常见问题大全web标准常见问题大全</a></li>
</body>
</html>TD peut aussi déborder et masquer l'affichage
Peut-être que dès que je nommerai cet article comme ça, quelqu'un le fera demander : Pourquoi faites-vous toujours attention à la table ? Ah, elle est obsolète depuis longtemps... dépêchez-vous d'utiliser Xhtml... div c'est bien... ul c'est bien... ol c'est bien... dl c'est bien... c'est fini, je ne sais pas quoi d'autre est mieux. La table est-elle vraiment dépassée ? Comprenez-vous vraiment le tableau ? Savez-vous vraiment utiliser les tableaux ? La guerre des mots n'est pas ce que nous voulons faire, laissons le soin à ceux qui ont tout le temps. Retour au sujet : Je ne me souviens pas quand quelqu'un utilisait un tableau pour simuler le DataGrid et demandait pourquoi le texte du td qui dépasse la largeur fixe ne pouvait pas être masqué, mais va envelopper directement? Oui, c'est bien le cas, comme :<style type="text/css">
table {width:500px;;}
.col1 {width:100px;}
.col2 {width:200px;}
.col3 {width:200px;}
td {white-space:nowrap;overflow:hidden;}
</style>
<table border="1" cellspacing="0" summary="回头来看看Table：TD也玩overflow:hidden">
<tr>
<td class="col1">神舟 优雅Q400N</td>
<td class="col2">优雅Q400N，采用Intel Core2 Duo(Merom) T5450(1.66G)处理器</td>
<td class="col3">迅驰4平台，突出的性价比，漂亮的外观</td>
</tr>
</table>Exécutez le code ci-dessus, vous constaterez que le texte dans la cellule qui dépasse le fixe width ne sera pas masqué, mais il est affiché dans une nouvelle ligne, ce n'est évidemment pas mon intention. Il semble que ce soit une caractéristique du tableau. Il ne peut pas bien supporter la combinaison de {width:*px;white-space:nowrap;overflow:hidden;}. En dernière analyse, il est blanc. -space : Nowrap ne fonctionne pas, il semble donc que overflow:hidden ne soit pas valide.
[Solution 1:]
Plus tard, quelqu'un le est mentionné que l'utilisation d'un pourcentage de largeur est suffisante. Après test, il est en effet possible de modifier légèrement le style de quelques lignes dans le premier paragraphe et de laisser les autres inchangées :
Après avoir exécuté le code modifié, Vous constaterez que le texte qui dépasse la largeur est bien masqué, et l'effet souhaité semble être obtenu..col1 {width:20%;}
.col2 {width:40%;}
.col3 {width:40%;}En fait, utiliser une largeur en pourcentage peut effectivement résoudre le problème du masquage du texte, mais cela ne semble pas être la meilleure solution, car parfois nous avons besoin d'une largeur fixe, pas d'une largeur en pourcentage.
La racine de tout cela est de savoir comment afficher le texte de la cellule sur une seule ligne sans retour à la ligne.
[Solution 2 :]
Pour répondre à cette exigence, en plus d'utiliser des styles, on peut aussi penser à une balise
<table border="1" cellspacing="0" summary="回头来看看Table：TD也玩overflow:hidden"> <tr> <td class="col1"><nobr>神舟 优雅Q400N</nobr></td> <td class="col2"><nobr>优雅Q400N，采用Intel Core2 Duo(Merom) T5450(1.66G)处理器</nobr></td> <td class="col3"><nobr>迅驰4平台，突出的性价比，漂亮的外观</nobr></td> </tr> </table>
做了这个修改，会发现，效果确实达到，是不是该兴奋呢？不，这似乎还不是最佳的解决方案，因为毕竟使用了一个许久不用且不推荐使用的元素标记，这多少让人觉得有点不爽。
沿着这个思路，我换了一个角度来考虑这个问题，发现问题迎刃而解。
既然在固定宽度的单元格内无法只简单的给th,td加上white-space:nowrap，那么我们在固定宽度的单元格内再加一个标记元素呢？
最佳方案：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta http-equiv="Content-Language" content="gb2312" />
<title>回头来看看Table：TD也玩overflow:hidden</title>
<style type="text/css">
table {width:500px;;}
.col1 {width:100px;}
.col2 {width:200px;}
.col3 {width:200px;}
th strong {display:block;width:100%;}
tr strong,tr td {white-space:nowrap;overflow:hidden;}
</style>
</head>
<body>
<table border="1" cellspacing="0" summary="测试">
<thead>
<tr>
<th class="col1"><strong>产品名称</strong></th>
<th class="col2"><strong>产品介绍</strong></th>
<th class="col3"><strong>产品备注</strong></th>
</tr>
</thead>
<tbody>
<tr>
<td>神舟 优雅Q400N</td>
<td>优雅Q400N，2007年7月上市，采用Intel Core2 Duo(Merom) T5450(1.66G)处理器</td>
<td>迅驰4平台，突出的性价比，漂亮的外观</td>
</tr>
</tbody>
</table>
</body>
</html>运行上面的代码，会发现这样的做法是可以的，而且从代码的简洁性、可读性和合理性几方面来说，都较前几种方案为好。
总结：
本文详细介绍了CSS中溢出隐藏（overflow）的实例详解，相信下伙伴么可以进一步的了解！ 还没有做过给单元格隐藏超过固定宽度内容的同学，可先在机器上玩玩，然后再来看本文
相关推荐：
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!
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
