Méthode : utilisez d'abord l'instruction "overflow:hidden" pour définir le contenu à masquer une fois qu'il dépasse la limite ; puis utilisez l'instruction "text-overflow:ellipsis" pour définir le contenu à afficher comme un points de suspension lorsqu'il dépasse la limite ; utilisez enfin l'instruction "white-space:nowrap", définissez simplement le texte sans sauts de ligne.
L'environnement d'exploitation de ce tutoriel : système Windows 7, version CSS3&&HTML5, ordinateur Dell G3.
Créez une nouvelle page html, recherchez la balise
sur la page de codes html, créez une balise
dans la balise
comme classe = "suite". Recherchez la balise
, créez une balise <style> sous cette balise et définissez le contenu de style avec class cont dans la balise <style> pour qu'il soit masqué une fois dépassé. <pre class="brush:php;toolbar:false"><!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>document</title>
<style>
.cont{
overflow:hidden;/*内容超出后隐藏*/
}
</style>
</head>
<body>
<p class="cont">
订单的的顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶</p>
</body>
</html></pre><p>Enregistrez le code, utilisez un navigateur pour ouvrir le fichier html pour voir l'effet et constatez que le contenu n'est pas masqué car la hauteur du contenu n'est pas définie. <p><img src="https://img.php.cn/upload/image/568/666/863/1618897643717434.png" title="1618897643717434.png" alt="Comment définir le texte au-delà des ellipses en CSS"/><p> Définissez le contenu à afficher sur une seule ligne, et le contenu sera affiché sous forme de points de suspension une fois dépassé. L'ajout de contenu à la classe cont est affiché sous forme de ligne : white-space: nowrap;, et le contenu après son dépassement est affiché sous forme de points de suspension : text-overflow: ellipsis; (Remarque : white-space: nowrap; et text-overflow : points de suspension; doit être utilisé en même temps pour être affiché est un point de suspension). <pre class="brush:js;toolbar:false"><style>
.cont{
overflow:hidden;/*内容超出后隐藏*/
text-overflow: ellipsis;/* 超出内容显示为省略号 */
white-space: nowrap;/* 文本不进行换行 */
}
</style></pre><p>Après avoir enregistré le code, utilisez un navigateur pour l'ouvrir pour voir si le contenu dépasse la limite et affiche des points de suspension. <p><img src="https://img.php.cn/upload/image/183/356/670/1618897808567717.png" title="1618897808567717.png" alt="Comment définir le texte au-delà des ellipses en CSS"/><p>Apprentissage recommandé : <a href="https://www.php.cn/course/list/12.html" target="_blank">tutoriel vidéo CSS</style>
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!
Déclaration：Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
