溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要為大家展示了“HTML中文字溢出隱藏的示例分析”，內容簡而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領大家一起研究并學習一下“HTML中文字溢出隱藏的示例分析”這篇文章吧。
單行文本的溢出隱藏
對于單行文本溢出 隱藏，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: '...';/*結尾內容換為 ... */
22 background:url("") repeat-y; /*背景是一個半白半透明的圖片*/
23 }
24 </style>
25 </head>
26 <body>
27 <p>
28 憑借專業的精神、優質的團隊、周到的服務，東方卓越現已成為眾中國銀行業協會、
中國航空運輸協會、中國工商銀行、中國建設銀行、鳳凰網、聯想（北京）、中國人保等知名企業的合作伙伴，
服務領域涵蓋金融證券、汽車產業、時尚傳媒、互聯網、地產家居、旅游娛樂等重點領域。憑借專業的精神、優質的團隊、
周到的服務，東方卓越現已成為眾中國銀行業協會、中國航空運輸協會、中國工商銀行、中國建設銀行、鳳凰網、
聯想（北京）、中國人保等知名企業的合作伙伴，服務領域涵蓋金融證券、汽車產業、時尚傳媒、互聯網、地產家居、
旅游娛樂等重點領域。
29 </p>
30 </body>
31 </html>效果：
以上是“HTML中文字溢出隱藏的示例分析”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業資訊頻道！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
