Teilen Sie Beispiele zum Ausblenden von Textüberläufen-H5-Tutorial-php.cn

Teilen Sie Beispiele zum Ausblenden von Textüberläufen

零下一度

Freigeben： 2018-05-11 13:34:22

Original

4281 Leute haben es durchsucht

　Beim Schreiben von Seiten habe ich das Ausblenden von einzeiligen Textüberläufen verwendet. Heute bin ich auf das Ausblenden von mehrzeiligen Textüberläufen gestoßen und habe Auslassungspunkte für den Überlaufteil verwendet. Ich habe es geklärt, indem ich einige Informationen überprüft und sie mit Ihnen geteilt habe.

　Überlauf-Ausblenden von einzeiligem Text

　Zum Überlauf-Ausblenden von Einzelzeilen line text, text-overflow: ellipsis kann eine perfekte Lösung sein, aber wenn Sie es verwenden, müssen Sie es mit overflow: versteckt und white- space: nowrap;, ich vergesse manchmal, es zu schreiben, sodass der Effekt nicht erzeugt werden kann und es lange dauert, ihn zu finden.

 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>

Nach dem Login kopieren

Wirkung:

Überlaufausblenden von mehrzeiligem Text

　Ich bin Pseudoklassen-Tags verwenden

 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>

Nach dem Login kopieren

Wirkung:

Freunde, wenn ihr einen besseren Weg habt, teilt ihn bitte!

Das obige ist der detaillierte Inhalt vonTeilen Sie Beispiele zum Ausblenden von Textüberläufen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!