https://juejin.cn/post/6976436998340870180 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>超强的 CSS 自动显示“全文”链接</title> <style> .wrapper { margin: 50px auto; width: 500px; overflow: hidden; resize: horizontal; background: #fff; border-radius: 8px; padding: 15px; box-shadow: 20px 20px 60px #bebebe, -20px -20px 60px #ffffff; position: relative; } .text, .text::before { overflow: hidden; text-overflow: ellipsis; text-align: justify; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; line-height: 1.5; background: inherit; } .text::before { content: attr(title); position: absolute; left: 15px; right: 15px; } .text::after { content: ''; display: block; margin-bottom: -1.5em; } </style> </head> <body> <div class="wrapper"> <div class="text" title="一直以来，Web 中想要使用矢量的彩色图标只能通过 SVG 的方式，这极大的束缚了用户的想象力，为此，我们一直在不断地探索和尝试。在解决了各种难题之后，今天，我很自豪地宣布，iconfont.cn 成为全球第一个支持彩色字体图标的生产管理平台，这使得我们目前几百万的彩色图标可以无缝切换到新的彩色字体图标技术上，同时也带来了很多激动人心的新特性。"> 一直以来，Web 中想要使用矢量的彩色图标只能通过 SVG 的方式，这极大的束缚了用户的想象力，为此，我们一直在不断地探索和尝试。在解决了各种难题之后，今天，我很自豪地宣布，iconfont.cn 成为全球第一个支持彩色字体图标的生产管理平台，这使得我们目前几百万的彩色图标可以无缝切换到新的彩色字体图标技术上，同时也带来了很多激动人心的新特性。</div> <div class="link"><a href="#">全文</a></div> </div> <div class="wrapper"> <div class="text" title="一直以来，Web 中想要使用矢量的彩色图标只能通过 SVG 的方式，这极大的束缚了用户的想象力，为此，我们一直在不断地探索和尝试。">一直以来，Web 中想要使用矢量的彩色图标只能通过 SVG 的方式，这极大的束缚了用户的想象力，为此，我们一直在不断地探索和尝试。</div> <div class="link"><a href="#">全文</a></div> </div> </body> </html> 提示：你可以先修改部分代码再运行。 转载请注明：有爱前端 » CSS 自动显示“全文”链接 喜欢 (0)or分享 (0)
