Maison > interface Web > Tutoriel H5 > le corps du texte

Partager des exemples de dépassement de texte masquant

零下一度
Libérer: 2018-05-11 13:34:22
original
4231 Les gens l'ont consulté

 Lors de l'écriture de pages, j'ai utilisé le masquage de débordement de texte sur une seule ligne. Aujourd'hui, j'ai rencontré un masquage de débordement de texte sur plusieurs lignes et j'ai utilisé des points de suspension pour la partie de débordement. J'ai réglé le problème en examinant certaines informations et je les ai partagées avec vous.

 Masquage par débordement d'un texte sur une seule ligne

 Pour masquage par débordement d'une seule ligne texte en ligne, text-overflow : les points de suspension peuvent être une solution parfaite, mais lorsque vous l'utilisez, vous devez le combiner avec overflow: caché et white- space: nowrap;, j'oublie parfois de l'écrire, donc l'effet ne peut pas être produit, et il me faut beaucoup de temps pour le trouver.

 1 <!DOCTYPE html> 
 2 <html> 
 3 <head> 
 4     <meta charset="UTF-8"> 
 5     <title>单行文本溢出隐藏</title> 
 6     <style> 
 7         p{ 
 8             width: 200px; 
 9             height: 300px;
 10             border: 1px solid cyan;
 11             overflow: hidden;/*溢出隐藏*/
 12             white-space: nowrap;/*文字不换行*/
 13             text-overflow: ellipsis;/*溢出用省略号代替*/
 14         }
 15     </style>
 16 </head>
 17 <body>
 18 <p>
 19     <p>凭借专业的精神、优质的团队、周到的服务,东方卓越现已成为众中国银行业协会、中国航空运输协会、
 中国工商银行、中国建设银行、凤凰网、联想(北京)、中国人保等知名企业的合作伙伴,服务领域涵盖金融证券、
 汽车产业、时尚传媒、互联网、地产家居、旅游娱乐等重点领域。</p>
 20 
 21 </p>
 22 </body>
 23 </html>
Copier après la connexion

Effet :

 

Masquage par débordement de texte multiligne

 Je suis Utiliser des balises pseudo-classe

 1 <!DOCTYPE html> 
 2 <html> 
 3 <head> 
 4     <meta charset="UTF-8"> 
 5     <title>多行文本溢出隐藏</title> 
 6     <style> 
 7         p{ 
 8             position: relative;
 9             overflow: hidden;
 10             width: 200px;
 11             height: 300px;
 12             line-height: 30px;
 13             font-size: 20px;
 14             border: 1px solid cyan;
 15         }
 16         p:after{
 17             position: absolute;
 18             bottom: 0;
 19             right: 0;
 20             padding:0 5px 1px 45px;
 21             content: &#39;...&#39;;/*结尾内容换为 ... */
 22             background:url("") repeat-y; /*背景是一个半白半透明的图片*/
 23         }
 24     </style>
 25 </head>
 26 <body>
 27 <p>
 28     凭借专业的精神、优质的团队、周到的服务,东方卓越现已成为众中国银行业协会、
 中国航空运输协会、中国工商银行、中国建设银行、凤凰网、联想(北京)、中国人保等知名企业的合作伙伴,
 服务领域涵盖金融证券、汽车产业、时尚传媒、互联网、地产家居、旅游娱乐等重点领域。凭借专业的精神、优质的团队、
 周到的服务,东方卓越现已成为众中国银行业协会、中国航空运输协会、中国工商银行、中国建设银行、凤凰网、
 联想(北京)、中国人保等知名企业的合作伙伴,服务领域涵盖金融证券、汽车产业、时尚传媒、互联网、地产家居、
 旅游娱乐等重点领域。
 29 </p>
 30 </body>
 31 </html>
Copier après la connexion

Effet :

Amis, si vous avez une meilleure façon, partagez-la !

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!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
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
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal