Maison >interface Web >tutoriel HTML >Comment réaliser le masquage automatique du contenu au-delà du HTML
Comment réaliser le masquage automatique du contenu au-delà du HTML
- 王林original
- 2021-06-23 11:57:437582parcourir
La façon de masquer automatiquement le contenu HTML consiste à ajouter l'attribut de débordement au contenu du texte et à définir la valeur de l'attribut sur caché, tel que [div{overflow: caché;}].
L'environnement d'exploitation de cet article : système Windows10, HTML 5, ordinateur Thinkpad T480.
Dans le travail réel, nous pouvons avoir besoin d'afficher un long texte, mais la taille de notre zone de texte n'est peut-être pas si grande, alors comment devrions-nous procéder ? En fait, c'est très simple, il suffit de masquer le contenu au-delà de la zone de texte. Mais pour obtenir cet effet, comment faut-il procéder ?
Il suffit d'utiliser l'attribut overflow pour obtenir cet effet.
L'attribut overflow spécifie ce qui se passe si le contenu déborde de la boîte d'un élément.
Valeurs d'attribut communes :
valeur par défaut visible. Le contenu ne sera pas coupé et sera rendu en dehors de la zone de l'élément.
masqué Le contenu sera coupé et le contenu restant sera invisible.
défilement Le contenu sera coupé, mais le navigateur affichera des barres de défilement pour afficher le contenu restant.
auto Si le contenu est coupé, le navigateur affiche des barres de défilement pour afficher le contenu restant.
inherit spécifie que la valeur de l'attribut overflow doit être héritée de l'élément parent.
Exemple de code :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
<style>
div.ex1 {
background-color: lightblue;
width: 110px;
height: 110px;
overflow: scroll;
}
div.ex2 {
background-color: lightblue;
width: 110px;
height: 110px;
overflow: hidden;
}
div.ex3 {
background-color: lightblue;
width: 110px;
height: 110px;
overflow: auto;
}
div.ex4 {
background-color: lightblue;
width: 110px;
height: 110px;
overflow: visible;
}
</style>
</head>
<body>
<h1>overflow 属性</h1>
<p>如果元素中的内容超出了给定的宽度和高度属性，overflow 属性可以确定是否显示滚动条等行为。</p>
<h2>overflow: scroll:</h2>
<div class="ex1">php中文网提供大量免费、原创、高清的php视频教程,并定期举行公益php培训!可边学习边在线修改示例代码,查看执行效果!php从入门到精通,一站式php自学平台!</div>
<h2>overflow: hidden:</h2>
<div class="ex2">php中文网提供大量免费、原创、高清的php视频教程,并定期举行公益php培训!可边学习边在线修改示例代码,查看执行效果!php从入门到精通,一站式php自学平台!</div>
<h2>overflow: auto:</h2>
<div class="ex3">php中文网提供大量免费、原创、高清的php视频教程,并定期举行公益php培训!可边学习边在线修改示例代码,查看执行效果!php从入门到精通,一站式php自学平台!</div>rrreeVous pouvez enregistrer le code exécuté ci-dessus pour l'exécuter localement et voir l'effet.
Partage de vidéos associées : Tutoriel vidéo 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!