How to truncate text with screen size using ellipses - html

Question

I have this Stackblitz and the Stackblitz Url that has 2 bootstrap cards inside a page layout with columns.
Problem - With the Name (.card-title) of the card being greater than 11 characters longs (max 15), when I shrink the screen between 768px-1200px the name at the top of the card squishes the star/rating down to the next line.
Question - Is there a way to truncate the name (ex. AnneMariesPlace) between 768px-1200px with ellipses, so that the star/rating remains on the same line?
ex. AnneMari...
This would mean the max length would be 8 plus the ellipses (3 chars)
Can it be done with pure CSS using?
FYI - I tried a couple of things with text-overflow: ellipsis; and white-space: nowrap;
but I didn't have much luck.
Here is the code I'm using
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
<div class="container my-3 my-xl-5">
<div class="row">
<div class="col-lg-3">
something here
</div>
<div class="col-lg-9">
<div class="row">
<div class="col">
<div class="mb-4">
</div>
<div class="row row-cols-1 row-cols-sm-2">
<div class="col mb-4">
<div class="card">
<div class="row no-gutters">
<div class="col-md-5">
<img class="yogaband-img img-fluid w-100" style="object-fit: cover; object-position: center; min-height: 100%;" src="https://res.cloudinary.com/k9dapp/image/upload/c_scale,w_1450,h_1450/f_auto/v1569538700/mainpage/iStock-860080282_bkhfsu.jpg" alt="yogaband">
</div>
<div class="col-md-7">
<div class="card-body py-1">
<div class="row">
<div class="col-12">
<b class="card-title d-inline">AnneMariesPlace</b>
<span class="float-right center-star">
★3.43
</span>
</div>
</div>
<div class="row">
<div class="col-12">
<span>Access</span>
<span class="float-right">Private</span>
</div>
<div class="col-12">
<span>Max Size</span>
<span class="float-right">10</span>
</div>
<div class="col-12">
<span>Events</span>
<span class="float-right">323</span>
</div>
<div class="col-12">
<span>Type</span>
<span class="float-right">Park</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col mb-4">
<div class="card">
<div class="row no-gutters">
<div class="col-md-5">
<img class="yogaband-img img-fluid w-100" style="object-fit: cover; object-position: center; min-height: 100%;" src="https://res.cloudinary.com/k9dapp/image/upload/c_scale,w_1450,h_1450/f_auto/v1569538700/mainpage/iStock-860080282_bkhfsu.jpg" alt="yogaband">
</div>
<div class="col-md-7">
<div class="card-body py-1">
<div class="row">
<div class="col-12">
<b class="card-title d-inline">AnneiMaries</b>
<span class="float-right center-star">
★3.43
</span>
</div>
</div>
<div class="row">
<div class="col-12">
<span>Access</span>
<span class="float-right">Private</span>
</div>
<div class="col-12">
<span>Max Size</span>
<span class="float-right">10</span>
</div>
<div class="col-12">
<span>Events</span>
<span class="float-right">323</span>
</div>
<div class="col-12">
<span>Type</span>
<span class="float-right">Park</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>

Answer 1

To make ellipsis work you need conditions. First, the element must NOT be inline. Yours it is even with an !important condition (which I don't know why you set it), second it needs a width set (it does not matter if percent or fixed) and last, it needs overflow:hidden and white-space:nowrap (so the content won't ever take a second line).
Basically, and based on your example, you need this:
.d-inline {
display: inline-block;
overflow: hidden;
width: calc(100% - 44px);
white-space: nowrap;
}
Unfortunately, it looks like your "score" will never get more width space than 44px. Use a bit more to feel safe just in case (browser zooming and such.)