Quelle est la différence entre le retour à la ligne et le débordement de texte ? Explication détaillée de deux propriétés-tutoriel CSS-php.cn

Quelle est la différence entre le retour à la ligne et le débordement de texte ? Explication détaillée de deux propriétés

云罗郡主

Libérer： 2018-10-26 16:24:11

original

4350 Les gens l'ont consulté

Dans les styles CSS, de nombreuses personnes ne peuvent pas faire la distinction entre deux attributs, l'un est le débordement de texte et l'autre le retour à la ligne. Alors, quels sont les attributs de retour à la ligne et de débordement de texte ? Résumons les propriétés de retour à la ligne et de débordement de texte.

1 : le retour à la ligne force l'attribut de nouvelle ligne

En CSS3, nous pouvons utiliser l'attribut de retour à la ligne pour déterminer une longue chaîne de mots et d'URL, et s'ils peut être enveloppé Allez à la ligne suivante, il existe deux valeurs pour le retour à la ligne, à savoir normal et break-word. Normal représente la valeur par défaut et enveloppe automatiquement la ligne. La seconde consiste à définir la longueur de l'URL et à forcer. un saut de ligne.

Par exemple :

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head> 
    <title>CSS3 word-wrap属性</title>
    <style type="text/css">
        #lvye
        {
            width:200px;
            height:120px;
            border:1px solid gray;
        }
    </style>
</head>
<body>
<div id="lvye">Welcome to the Chinese website, where there is endless PHP knowledge to let you roam in the sea of knowledge.http://www.php.cn/div-tutorial-275623.html</div>
</body>
</html>

Copier après la connexion

L'effet d'aperçu du code ci-dessus dans le navigateur :

Quelle est la différence entre le retour à la ligne et le débordement de texte ? Explication détaillée de deux propriétés

Si nous ajoutons un mot dans le div -wrap:break-word; forcera une nouvelle ligne si le mot est trop long, il sera hors de portée. Lors de la création d’un site Web, il suffit de choisir la valeur par défaut.

2 : attribut de débordement de texte

Lorsque nous prévisualisons une page Web, nous verrons toujours ce phénomène. Lorsque notre texte dépasse une certaine plage, il le fera. sera affiché sous forme d’ellipses et le texte supplémentaire ne sera pas affiché. Ce paramètre est en fait meilleur pour les utilisateurs et peut les aider à connaître plus de contenu.

Si nous voulons masquer le contenu redondant, nous pouvons utiliser l'attribut text-overflow. Généralement, text-overflow a également deux valeurs. Le premier cas est lorsque le texte déborde et que des points de suspension apparaissent, et l'autre est. lorsque le texte déborde et apparaît. Les points de suspension ne s'affichent pas.

la syntaxe de débordement de texte est :

text-overflow:ellipsis; 
overflow:hidden; 
white-space:nowrap;

Copier après la connexion

La condition préalable est que ces trois conditions soient affichées en même temps pour être utilisées.

Par exemple :

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>CSS3 text-overflow属性</title>
    <style type="text/css">
        #div1
        {
            width:200px;
            height:100px;
            border:1px solid gray;
            text-overflow:ellipsis;
            overflow:hidden;
            white-space:nowrap;
        }
    </style>
</head>
<body>
    <div id="div1">php是最好的语言，欢迎大家学习交流</div>
</body>
</html>

Copier après la connexion

L'effet d'affichage est le suivant :

Quelle est la différence entre le retour à la ligne et le débordement de texte ? Explication détaillée de deux propriétés

Ce qui précède est une explication détaillée du mot- Attributs wrap et text-overflow en css Introduction complète, si vous voulez en savoir plus sur le Tutoriel vidéo CSS, veuillez faire attention au site Web chinois php.

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!

Php8, je viens aussi

Apprenez la mise en page d'un site Web en 30 minutes

Tutoriel vidéo Shangguan Oracle débutant à compétent

Votre première ligne de code UNI-APP

Flutter de zéro au lancement de l'application

Brother Lian Nouveau didacticiel vidéo Linux

Tutoriel vidéo AXURE 9 (convient à l'interface utilisateur interactive de conception de produits du chef de produit)

Tutoriel vidéo PS Zero Basic Proficiency

Tutoriel vidéo de 16 jours sur l'interface utilisateur pour vous aider à démarrer

Tutoriel vidéo sur les techniques PS et les techniques de découpage

Tutoriel vidéo sur la construction et le lancement de projets d'Alibaba Cloud Environment

Présentation des réseaux informatiques - Connaissances de base que les programmeurs doivent maîtriser

Tutoriel essentiel pour les programmeurs - Explication du protocole HTTP

Tutoriel vidéo Websocket

Quelle est la différence entre le retour à la ligne et le débordement de texte ? Explication détaillée de deux propriétés