Maison > interface Web > tutoriel HTML > Comment masquer la partie excédentaire du texte HTML

Comment masquer la partie excédentaire du texte HTML

王林
Libérer: 2021-06-21 10:15:03
original
5659 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!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal