Html 将宽度调整为省略号内容

如果所述文本溢出，我将使用省略号在固定宽度结构中包含的

span

元素中显示一些文本。Boostrap工具提示在这些元素中初始化，以便可以可视化全文。但是，

span

的全宽在视觉上错误放置了工具提示。如何调整其宽度以使工具提示呈现在正确的位置

下面是一个工作片段（链接）

$（'.venture'）。工具提示({
位置：'对'，
容器：“主体”
});
@import（“https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css好的，轮{
利润率：40px 20px；
背景：#ededed；
宽度：150px；
}
.比赛{
高度：190x；
位置：相对位置；
}
.团队{
宽度：155px；
高度：22px；
背景：#eee；
位置：相对位置；
}
.标签{
宽度：120px；
位置：绝对位置；
}
.得分{
宽度：35px；
浮动：对；
}
.日程安排{
宽度：100%；
位置：绝对位置；
顶部：23px；
}
.scheduling>.wrapper{
空白：nowrap；
文本溢出：省略号；
溢出：隐藏；
}

第一队
0
2019年10月24日&mdash；
很长的场馆名称
我的第一个提案：

.scheduling > .wrapper {
   display: flex;
   flex-direction: row;
   flex-wrap: nowrap;
}
.venue {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

我的第二个建议：取消头衔

 <div class="wrapper" title="Very Long Venue Name">
      <span class="date">24/10/2019</span>
      &mdash;
      <span class="venue" >Very Long Venue Name</span>
    </div>

我的第一项建议是：

.scheduling > .wrapper {
   display: flex;
   flex-direction: row;
   flex-wrap: nowrap;
}
.venue {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

我的第二个建议：取消头衔

 <div class="wrapper" title="Very Long Venue Name">
      <span class="date">24/10/2019</span>
      &mdash;
      <span class="venue" >Very Long Venue Name</span>
    </div>

我刚刚将您的代码示例转换为一个工作代码段（保留了fiddle链接，但让其代码保持原样）。您是否坚持使用
工具提示
解决方案？它可能不适合您的需要。我刚刚将您的代码示例转换为一个工作代码段（保留了fiddle链接，但让其代码“按原样”存在）。您是否坚持使用
工具提示
解决方案？它可能不适合您的需要。这不好，因为从技术上讲，
.date
也可能有工具提示。场馆工具提示必须相对于场馆
span
，而不是包装器显示。像这样吗？每个工具提示都与它的跨度相关，这是不好的，因为从技术上讲，
.date
也可能有工具提示。场馆工具提示必须相对于场馆
span
，而不是包装器显示。像这样吗？每个工具提示都与其范围相关