Adjusting width to ellipsed content - html

Question

I am displaying some text in a span element contained in a fixed width structure using ellipsis if said text overflows. A Boostrap tooltip is initialized in such elements so that the full text can be visualized. However the full width of the span visually misplaces the tooltip. How can I adjust its width so that the tooltip is rendered in a proper position?
Below a working snippet (fiddle link).
$('.venue').tooltip({
placement: 'right',
container: 'body'
});
#import("https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css") .round {
margin: 40px 20px;
background: #ededed;
width: 150px;
}
.match {
height: 190x;
position: relative;
}
.team {
width: 155px;
height: 22px;
background: #eee;
position: relative;
}
.label {
width: 120px;
position: absolute;
}
.score {
width: 35px;
float: right;
}
.scheduling {
width: 100%;
position: absolute;
top: 23px;
}
.scheduling>.wrapper {
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
<div class="round">
<div class="match">
<div class="team">
<div class="label">Team 1</div>
<div class="score">0</div>
<div class="scheduling">
<div class="wrapper">
<span class="date">24/10/2019</span> —
<span class="venue" title="Very Long Venue Name">Very Long Venue Name</span>
</div>
</div>
</div>
</div>
</div>

Answer 1

My first proposal:
.scheduling > .wrapper {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
}
.venue {
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
My second proposal: deplace title
<div class="wrapper" title="Very Long Venue Name">
<span class="date">24/10/2019</span>
—
<span class="venue" >Very Long Venue Name</span>
</div>
and
$('.wrapper').tooltip({placement: 'right', container: 'body'});