const app = Vue.createApp({
data() {
return {
emails: [],
renderedEmails: [],
hiddenCount: 0,
}
},
methods: {
measureRecipientList() {
const tolerance = 50
const containerWidth =
document.getElementById('email-container').offsetWidth + tolerance
let totalWidth = 0
let countDisplay = -1
setTimeout(() => {
const hiddenEmailDivs =
document.getElementsByClassName('hidden-email')
for (const el of hiddenEmailDivs) {
if (totalWidth < containerWidth) {
totalWidth += el.clientWidth
countDisplay += 1
}
}
if (totalWidth > containerWidth) {
countDisplay -= 1
}
this.renderedEmails = this.emails.slice(0, countDisplay)
this.hiddenCount = this.emails.length - countDisplay
})
},
onWidthChange() {
this.measureRecipientList()
}
},
mounted() {
window.addEventListener("resize", this.onWidthChange);
setTimeout(() => {
this.emails = [
'<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="50353d31393c61103528313d203c357e333f3d">[email protected]</a>',
'<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="60050d01090c52200518010d100c054e030f0d">[email protected]</a>',
'<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="fc99919d9590cfbc99849d918c9099d29f9391">[email protected]</a>',
'<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="147179757d782054716c75796478713a777b79">[email protected]</a>',
'<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="02676f636b6e3742677a636f726e672c616d6f">[email protected]</a>',
'<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="96f3fbf7fffaa0d6f3eef7fbe6faf3b8f5f9fb">[email protected]</a>',
'<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="12777f737b7e2552776a737f627e773c717d7f">[email protected]</a>',
'<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="442129252d287c04213c25293428216a272b29">[email protected]</a>',
'<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="ee8b838f8782d7ae8b968f839e828bc08d8183">[email protected]</a>',
'<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="e2878f838b8ed3d2a2879a838f928e87cc818d8f">[email protected]</a>',
]
}, 500)
},
unmounted() {
window.removeEventListener("resize", this.onWidthChange);
},
watch: {
emails() {
this.measureRecipientList()
},
},
})
app.mount("#app")
#email-container {
border: 1px solid #ccc;
padding: 2px;
height: 25px;
white-space: nowrap;
position: relative;
overflow-x: hidden;
}
.email {
opacity: 1;
display: inline-block;
border: 1px solid #ccc;
background-color: pink;
padding: 2px 2px;
border-radius: 6px;
}
.hidden-email {
visibility: hidden;
display: inline-block;
border: 1px solid #ccc;
background-color: pink;
padding: 2px 2px;
margin-right: 2px;
border-radius: 6px;
}
#badge {
background-color: red;
color: white;
position: absolute;
right: 0;
top: 0;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
width: 100px;
}
<div id="app">
<div>Recipient List:</div>
<div id="email-container">
<div class="email" v-for="(email, index) in renderedEmails" :key="index">
{{ email }}
</div>
<div class="hidden-email" v-for="(email, index) in emails" :key="index">
{{ email }}
</div>
<div id="badge">
{{ hiddenCount }} more
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/3.4.8/vue.global.min.js"></script>