css省略号后面跟图标

embedded/2024/12/28 4:05:47/

css_0">纯css实现省略号后面跟图标

不溢出图标跟在文字后面，超过两行省略号表示，并在后面跟图标

在这里插入图片描述

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title></head><body><body><style>css">.wrapper {display: flex;margin: 20px auto;width: 300px;overflow: hidden;border-radius: 8px;padding: 15px;border: 1px solid #0097ff;}.text {font-size: 20px;overflow: hidden;text-overflow: ellipsis;text-align: justify;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;position: relative;}.text::before {content: "";height: calc(100% - 24px);float: right;}.icon {width: 100%;height: 100%;position: absolute;background-color: #fff;}.icon::before {content: "图标";background: pink;border-radius: 3px;font-size: 16px;padding: 0 8px;}.btn {float: right;clear: both;font-size: 16px;padding: 0 8px;background: pink;line-height: 24px;border-radius: 3px;cursor: pointer;}.btn::before {content: "图标";}</style><div class="wrapper"><div class="text"><span class="btn"></span>超出两行省略号显示，并在后面跟图标。超出两行省略号显示，并在后面跟图标。超出两行省略号显示，并在后面跟图标。超出两行省略号显示，并在后面跟图标。超出两行省略号显示，并在后面跟图标。超出两行省略号显示，并在后面跟图标。超出两行省略号显示，并在后面跟图标。<span class="icon"></span></div></div><div class="wrapper"><div class="text"><span class="btn"></span>不超过两行图标直接跟在文字后面，不超过两行<span class="icon"></span></div></div></body></body>
</html>