css 多行溢位顯示省略號
阿新 • • 發佈：2020-12-29
記錄下看到的一個CSS巧用，非常 有意思。
1 常規的處理方法
<style> .wrap { width: 40vw; border: 1px solid red; font-size:large; overflow:hidden; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:4 } </style> <body> <div class="wrap"> 元宵來臨，重大新聞，大家準備好祝福語了嗎?下面是小編為大家整理的元宵節祝福語，歡迎大家閱讀。1. 張燈結綵龍獅鬧，團圓歡樂一家好，家庭事業火紅照， 友情親情繞，平安健康都來到，真情滋潤好運交，元宵節的吉祥一路拋，灑下前程更 </div> </body>
2 利用偽元素巧妙解決
<style> .wrap { width: 40vw; border: 1px solid red; max-height:90px; overflow:hidden; position:relative; padding-right:1em; text-align:justify; } .wrap::before{ content:'...'; position:absolute; right:0; bottom:0; } .wrap::after{ content:''; background:#fff; width:1em; height:1em; position:absolute; display:inline; right:0; margin-top:0.5em; z-index:1 } </style> <body> <div class="wrap"> 元宵來臨，重大新聞，大家準備好祝福語了嗎?下面是小編為大家整理的元宵節祝福語，歡迎大家閱讀。1. 張燈結綵龍獅鬧，團圓歡樂一家好，家庭事業火紅照， 友情親情繞，平安健康都來到，真情滋潤好運交，元宵節的吉祥一路拋，灑下前程更 </div> </body>