Comment masquer la partie excédentaire du texte HTML-tutoriel HTML-php.cn

Comment masquer la partie excédentaire du texte HTML

王林

Libérer： 2021-06-21 10:15:03

original

5646 Les gens l'ont consulté

La façon de masquer la partie excédentaire du texte HTML consiste à ajouter l'attribut overflow à la zone de texte et à définir la valeur de l'attribut sur cachée, par exemple [overflow:hidden;]. caché signifie que le contenu sera coupé et que le reste du contenu ne sera pas visible.

Comment masquer la partie excédentaire du texte HTML

L'environnement d'exploitation de cet article : système Windows10, HTML 5, ordinateur Thinkpad T480.

Parfois, lorsque nous saisissons du texte dans la zone de texte, nous constatons que la partie au-delà de la zone de texte est manquante ou devient des points de suspension, c'est-à-dire que la partie au-delà de la zone de texte est masquée. Alors, que devons-nous faire si nous voulons également obtenir cet effet ? C'est en fait très simple, il suffit d'utiliser l'attribut overflow. Jetons-y un coup d’œil ensemble.

L'attribut overflow spécifie ce qui se passe si le contenu déborde de la boîte d'un élément.

Valeur de l'attribut :

visible Valeur par défaut. 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.

L'exemple de code est le suivant :

<!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>

<h2>overflow: visible (默认):</h2>
<div class="ex4">php中文网提供大量免费、原创、高清的php视频教程,并定期举行公益php培训!可边学习边在线修改示例代码,查看执行效果!php从入门到精通,一站式php自学平台!</div>

</body>
</html>

Copier après la connexion

Si vous êtes intéressé, vous pouvez enregistrer le code ci-dessus pour l'exécuter localement pour voir l'effet spécifique.

Recommandations 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!