Conseils de mise en page HTML : Comment utiliser l'attribut overflow pour le contrôle du débordement de texte-tutoriel HTML-php.cn

Conseils de mise en page HTML : Comment utiliser l'attribut overflow pour le contrôle du débordement de texte

WBOY

Libérer： 2023-10-19 11:30:50

original

1391 Les gens l'ont consulté

Conseils de mise en page HTML : Comment utiliser lattribut overflow pour le contrôle du débordement de texte

Compétences en mise en page HTML : Comment utiliser l'attribut de débordement pour le contrôle des débordements de texte

Dans le développement Web, nous rencontrons parfois souvent le problème d'un contenu de texte trop long et qui déborde. Afin de contrôler ce débordement et de rendre la mise en page de la page Web plus belle et plus régulière, vous pouvez utiliser l'attribut overflow de CSS. Cet article explique comment utiliser l'attribut overflow et fournit des exemples de code spécifiques.

1. Le rôle de l'attribut overflow

L'attribut overflow est utilisé pour contrôler la manière dont le contenu de l'élément déborde. Un débordement se produit lorsque le contenu d'un élément dépasse sa largeur ou sa hauteur définie. L'attribut overflow peut contrôler l'expression de ce débordement, et a généralement les valeurs suivantes :

visible : Le contenu ne sera pas tronqué et débordera en dehors de la boîte de l'élément. Il s'agit de la valeur par défaut.
masqué : le contenu est coupé et non visible.
défilement : le contenu est coupé, mais des barres de défilement sont fournies pour afficher le reste du contenu.
auto : fournit automatiquement des barres de défilement si le contenu déborde.

Lorsqu'il s'agit d'un débordement de contenu textuel, les masqués et les points de suspension sont souvent utilisés.

2. Utilisez caché pour contrôler le débordement de texte

La valeur cachée signifie que lorsque le contenu de l'élément déborde, il sera coupé et masqué, le rendant invisible. En définissant l'attribut de débordement sur caché, vous pouvez obtenir l'effet de masquage du débordement de texte. Voici un exemple de code :

<!DOCTYPE html>
<html>
<head>
    <style>
        .container {
            width: 200px;
            height: 100px;
            border: 1px solid black;
            overflow: hidden;
            text-overflow: ellipsis;
        }
    </style>
</head>
<body>
    <div class="container">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris ac nisi sed est hendrerit hendrerit nec at ipsum. Sed finibus diam urna, a convallis ex auctor non. Praesent ornare mi sed iaculis hendrerit. Sed vitae ipsum et nisi vestibulum tincidunt vel eu erat. Sed suscipit dui eu felis commodo aliquet.
    </div>
</body>
</html>

Copier après la connexion

Dans le code ci-dessus, un élément conteneur div est utilisé et une ligne noire continue d'une largeur de 200 px, d'une hauteur de 100 px et d'une bordure de 1 px est définie. En définissant l'attribut de débordement sur caché, lorsque le contenu du texte déborde, la partie excédentaire sera masquée et ne sera pas affichée. Cela permet d'obtenir l'effet de contrôle de débordement de contenu de texte.

3. Utilisez des points de suspension pour afficher des points de suspension lorsque le texte déborde

Dans certains cas, nous souhaitons afficher des points de suspension lorsque le texte déborde pour rappeler aux utilisateurs qu'il y a plus de contenu à afficher. À l'heure actuelle, vous pouvez utiliser la propriété text-overflow de CSS et le mot-clé ellipsis pour y parvenir. Voici un exemple de code :

<!DOCTYPE html>
<html>
<head>
    <style>
        .container {
            width: 200px;
            height: 100px;
            border: 1px solid black;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
    </style>
</head>
<body>
    <div class="container">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris ac nisi sed est hendrerit hendrerit nec at ipsum. Sed finibus diam urna, a convallis ex auctor non. Praesent ornare mi sed iaculis hendrerit. Sed vitae ipsum et nisi vestibulum tincidunt vel eu erat. Sed suscipit dui eu felis commodo aliquet.
    </div>
</body>
</html>

Copier après la connexion

Dans le code ci-dessus, en définissant l'attribut text-overflow sur points de suspension, lorsque le contenu du texte déborde, la partie excédentaire sera affichée sous forme de points de suspension (...). Dans le même temps, en définissant l'attribut d'espace blanc sur nowrap, le texte est affiché sur une seule ligne afin que les points de suspension puissent être affichés. Cela permet d'obtenir l'effet d'afficher des points de suspension lorsque le texte déborde.

En résumé, l'utilisation de l'attribut overflow pour contrôler le débordement du contenu textuel peut résoudre efficacement le problème de débordement dans la mise en page des pages Web. Selon les besoins réels, différents effets de contrôle de débordement peuvent être obtenus en sélectionnant la valeur de débordement appropriée et en la combinant avec d'autres attributs associés. J'espère que les exemples de code spécifiques fournis dans cet article vous seront utiles.

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!