Comment définir le texte au-delà des ellipses en CSS-tutoriel CSS-php.cn

Comment définir le texte au-delà des ellipses en CSS

醉折花枝作酒筹

Libérer： 2023-01-05 16:10:00

original

15907 Les gens l'ont consulté

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.

Comment définir le texte au-delà des ellipses en CSS

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é. <div class="code" style="position:relative; padding:0px; margin:0px;"><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><div class="contentsignin">Copier après la connexion</div></div><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><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><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). </p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;toolbar:false"><style> .cont{ overflow:hidden;/*内容超出后隐藏*/ text-overflow: ellipsis;/* 超出内容显示为省略号 */ white-space: nowrap;/* 文本不进行换行 */ } </style></pre><div class="contentsignin">Copier après la connexion</div></div><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!