How do I make the text use overflow ellipsis - html

Question

So I have this card with a div inside it. And the idea is that I want to show a icon to the left and then a text to the right of the icon indicating a username can be up to 32 characters long.
<div>
<h5 class="d-inline"><i class="icofont icofont-social-snapchat"></i></h5>
<p class="d-inline">rwmGhw9El8cBMeyvzQ18fmZP2EbLaQhY</p>
</div>
The issue is that when I start shrinking the page, the text gets places under the icon and it starts going outside of the card.
I'm actually not sure to why this happens or what the best way to fix this is.
How do I properly deal with something like this? Would adding ellipsis be a good idea?
Here is the markup for the card
<div class="col-xl-4 px-2">
<div class="card card-with-border mt-5 ">
<div class="card-body mb-0">
#foreach (var item in user.Tags)
{
<span class="badge badge-primary mt-3 ml-0">#item</span>
}
</div>
<div class="card-body socialprofile filter-cards-view pt-2">
<div class="media">
<div class="avatar ratio"><img class="b-r-8 height-50 mr-3 img-80" src=#user.Image alt="#"></div>
<div class="media-body">
<h6 class="font-danger f-w-600">Hello, World!</h6>
<div>
<h5 class="d-inline"><i class="icofont icofont-social-snapchat"></i></h5>
<p class="d-inline">rwmGhw9El8cBMeyvzQ18fmZP2EbLaQhY</p>
</div>
<span class="card-text"><h5><i class="icofont icofont-social-instagram"></i></h5><p></p></span>
<p class="card-text mt-2">Testing the text lets see what it looks like.</p>
</div>
</div>
<div class="social-btngroup d-flex">
<button class="btn btn-primary w-100">Like</button>
</div>
<div class="likes-profile text-center">
<h5> <span> <i class="fa fa-heart font-danger"></i> 884</span></h5>
</div>
</div>
</div>
</div>

Answer 1

Your element need to be in display: block or display: inline-block.
/* Limit size of media-body */
.media-body {
max-width: calc(100% - 2rem);
}
.ellipsis {
display: block !important;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
<div>
<h5 class="d-inline"><i class="icofont icofont-social-snapchat"></i></h5>
<!-- Add the class ellipsis where you want -->
<p class="d-inline ellipsis">rwmGhw9El8cBMeyvzQ18fmZP2EbLaQhY</p>
</div>