텍스트 오버플로 숨기기 예 공유-H5 튜토리얼-php.cn

텍스트 오버플로 숨기기 예 공유

零下一度

풀어 주다： 2018-05-11 13:34:22

원래의

4230명이 탐색했습니다.

　이전에는 페이지 작성 시 한 줄 텍스트 오버플로 숨기기를 사용했는데 오늘은 여러 줄 텍스트 오버플로 숨기기를 접하고 오버플로 부분에 줄임표를 사용했습니다. 몇 가지 정보를 검토하여 정리해서 공유해 드렸습니다.

　한 줄 텍스트의 오버플로 숨기기

　한 줄 텍스트 오버플로 숨기기의 경우 text-overflow: ellipsis로 완벽하게 해결할 수 있지만 사용 시 와 함께 사용해야 합니다. Overflow: Hidden 및 white-space: nowrap;을 가끔 쓰는 것을 잊어버려서 효과가 나오지 않고 찾는 데 오랜 시간이 걸렸습니다.

 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>

로그인 후 복사

효과:

여러 줄 텍스트의 오버플로 숨기기

저는 의사 클래스 태그를 사용하고 있습니다

 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>

로그인 후 복사

효과: