Maison > Article > interface Web > 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
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
- 云罗郡主original
- 2018-10-26 16:24:114482parcourir
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>L'effet d'aperçu du code ci-dessus dans le navigateur :
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;
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>L'effet d'affichage est le suivant :
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!