Bootstrap中Flex/Nowrap与首列及text-truncate兼容问题求助

嘿，我来帮你搞定这个首列换行的问题！你遇到的情况是因为Bootstrap的flex布局默认会压缩子元素来适应容器宽度，导致首列的时间文本被挤到第二行。咱们只需要调整几个Bootstrap内置类就能完美解决：

修改后的完整代码 #

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.css" rel="stylesheet"/>
<div class="card-header text-center d-flex justify-content-center" style="width:350px">
  <!-- 首列：确保内容不被压缩、不换行 -->
  <div class="mr-1 flex-nowrap flex-shrink-0" data-bind="html: TimeFormatted"> 9:05 AM CDT </div>
  <!-- 第二列：占满剩余空间，支持内部文本截断 -->
  <div class="flex-grow-1 overflow-hidden d-flex align-items-center"> 
    @ 
    <span class="text-truncate mx-1 flex-grow-1" data-bind="text: VenueName"> ACA dsf asdf sdsadf d fsd fsd fsd fsa </span> 
    (<span data-bind="text: CourtName">East</span>)
  </div>
</div>

关键修改说明 #

• 给首列添加flex-shrink-0：这个类会设置flex-shrink: 0，告诉浏览器绝对不要压缩这个元素的宽度，它会保持自身内容所需的最小宽度，这样"9:05 AM CDT"就永远不会被拆分成两行。
• 给第二列添加flex-grow-1+overflow-hidden：flex-grow-1让第二列占据父容器剩余的所有可用空间；overflow-hidden是text-truncate生效的必要条件，能让超出容器的文本被隐藏并显示省略号。
• 给场地名称的span添加flex-grow-1：确保过长的场地名称能占据第二列里除了"@"和球场名之外的所有空间，触发截断效果。

这样调整后，首列会自适应扩展自身宽度（但不会超出内容所需）且永不换行，第二列的过长文本会自动截断显示省略号，完美适配你的需求～

内容的提问来源于stack exchange，提问作者Mike Flynn