Lorsque nous effectuons du développement web front-end, nous obtenons généralement le titre de l'article et l'affichons ligne par ligne. Mais lorsque le titre est trop long, cela provoquera des sauts de ligne. De plus, lors de l’affichage d’une partie des informations textuelles, il serait trop fastidieux de les afficher en totalité, ce qui entraînerait une mauvaise expérience Web. Bien que nous puissions utiliser overflow:hidden pour masquer les caractères qui dépassent la largeur. Mais la fin semble toujours un peu raide. Cela ne permet pas non plus de faire savoir à l'utilisateur qu'il reste des caractères non affichés plus tard. La meilleure façon est de remplacer les caractères supplémentaires par des points de suspension.
Dans ce chapitre, nous vous présenterons en détail comment utiliser CSS pour faire en sorte que la partie débordement des ellipses d'affichage du texte. J'espère que cela aide tout le monde.
1 : Une seule ligne de texte déborde et affiche des points de suspension... (la plupart du temps les points de suspension sont affichés dans la partie en excès du titre...)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS如何使文本溢出部分显示省略号？单行超出</title>
<style>
*{margin: 0px;padding: 0px;}
.box{width: 300px;height: 500px;margin: 50px auto;}
.overflow{
width:220px;
overflow:hidden;
white-space: nowrap;
text-overflow: ellipsis;
-o-text-overflow:ellipsis;
}
</style>
</head>
<body>
<div class="box">
<p>
css 实现单行文本超出长度显示省略号
</p>
<p class="overflow">
css 实现单行文本超出长度显示省略号
</p>
</div>
</body>
</html>Le code ci-dessus Le rendu est le suivant :
Parmi eux, white-space: nowrap; continuez sur la même ligne jusqu'à ce qu'il rencontre une étiquette;
overflow: caché; Ne pas afficher le contenu qui dépasse la taille de l'objet, c'est-à-dire masquer la partie excédentaire
text-overflow: points de suspension ; ; Lorsque l'objet texte déborde, il est affiché..., bien sûr, il peut également être paramétré. Le clip n'affiche pas de points
-o-text-overflow : Afin d'être compatible avec le Navigateur Opera ;
2 : Le débordement de texte sur plusieurs lignes affiche des points de suspension...
1 Défini directement avec les attributs CSS (seul le noyau -webkit a un effet)<🎜. >
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS如何使文本溢出部分显示省略号？多行超出</title>
<style>
*{margin: 0px;padding: 0px;}
.box{
width: 280px;
height: 62px;
margin: 50px auto;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
}
</style>
</head>
<body>
<div class="box">
css 实现多行文本超出长度显示省略号，css 实现多行文本超出长度显示省略号，
css 实现多行文本超出长度显示省略号
</div>
</body>
</html>
;
display : -webkit-box affiche l'objet comme un modèle de boîte flexible - webkit-box-orient définit ou récupère la disposition des éléments enfants de l'objet flex box ; >text-overflow : les points de suspension sont utilisés pour le texte multiligne, en utilisant les points de suspension "..." pour masquer le texte qui dépasse la plage. 2. Utiliser des pseudo-classesLe rendu du code ci-dessus est le suivant :
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS如何使文本溢出部分显示省略号？多行超出</title>
<style>
*{margin: 0px;padding: 0px;}
.box{
width: 280px;
height: 62px;
margin: 50px auto;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
}
p{position: relative; line-height: 20px; max-height: 40px;overflow: hidden;}
p::after{
content: "..."; position: absolute; bottom: 0; right: 0; padding-left: 40px;
background: -webkit-linear-gradient(left, transparent, #fff 55%);
background: -o-linear-gradient(right, transparent, #fff 55%);
background: -moz-linear-gradient(right, transparent, #fff 55%);
background: linear-gradient(to right, transparent, #fff 55%);
}
</style>
</head>
<body>
<div class="box">
<p>
css 实现多行文本超出长度显示省略号，
css 实现多行文本超出长度显示省略号，
css 实现多行文本超出长度显示省略号
</p>
</div>
</body>
</html>Cette méthode a un large gamme d'applications, mais le texte Ellipses apparaîtra également lorsque la ligne n'est pas dépassée. Cette méthode peut être optimisée avec js. 
Rendu du code ci-dessus :
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS如何使文本溢出部分显示省略号？多行超出</title>
<style>
*{margin: 0px;padding: 0px;}
.box{width: 300px;height: 500px;margin: 50px auto;}
.con{
position: relative;
height: 40px;
width: 250px;
line-height: 20px;
overflow: hidden;
padding-right: 12px;
}
.t{
position: absolute;
right: 0;
bottom: 0;
}
</style>
</head>
<body>
<div class="box">
<p class="con">
css 实现多行文本超出长度显示省略号，
css 实现多行文本超出长度显示省略号，
css 实现多行文本超出长度显示省略号。
<span class="t">...</span>
</p>
</div>
</body>
</html> Le principe de cette méthode est le suivant : intégrez d'abord une position ... dans l'élément contenant le texte, puis laissez une position de points de suspension... (padding-right) sur le côté droit de l'élément contenant text ), et enfin utilisez le positionnement absolu pour positionner les points de suspension... dans la zone de remplissage droite à droite (coin inférieur droit). 
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!
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
