Comment configurer CSS pour dépasser les ellipses d'affichage-tutoriel CSS-php.cn

Comment configurer CSS pour dépasser les ellipses d'affichage

青灯夜游

Libérer： 2021-10-11 17:08:59

original

157476 Les gens l'ont consulté

Comment définir les points de suspension à afficher au-delà de la limite CSS : 1. Utilisez l'instruction "overflow:hidden;" pour masquer la partie en excès ; 2. Utilisez l'instruction "text-overflow:ellipsis;" le texte déborde de l'élément inclus. Représente la partie cachée.

Comment configurer CSS pour dépasser les ellipses d'affichage

L'environnement d'exploitation de ce tutoriel : système Windows7, version CSS3&&HTML5, ordinateur Dell G3.

Les paramètres CSS peuvent être divisés en deux situations lorsque les points de suspension sont affichés au-delà de l'affichage

Une seule ligne de texte déborde et affiche des points de suspension...
Plusieurs lignes de texte débordent et affichent des points de suspension. ..

Mais le code principal utilisé est le même : vous devez d'abord utiliser "overflow:hidden;" pour masquer la partie en excès, puis utiliser "text-overflow:ellipsis;" quand il dépasse.

overflow: caché;Ne pas afficher le contenu qui dépasse la taille de l'objet, c'est-à-dire masquer la partie en excès overflow：hidden;不显示超过对象尺寸的内容，就是把超出的部分隐藏了；
text-overflow：ellipsis;

text-overflow: points de suspension; Lorsque le débordement d'objet de texte est affiché..., bien sûr, vous pouvez également définir la propriété sur clip pour ne pas afficher de points

Code d'implémentation

1. .

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<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>

Copier après la connexion

Rendu : Comment configurer CSS pour dépasser les ellipses daffichage

2. Le texte multiligne déborde et affiche des ellipses... Comment configurer CSS pour dépasser les ellipses daffichage

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<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多行文本超出长度显示省略号，css多行文本超出长度显示省略号。
		</div>
	</body>
</html>

Copier après la connexion

(Partage vidéo d'apprentissage : 🎜tutoriel vidéo CSS🎜)🎜

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!