Flex/Nowrap 无法处理 bootstrap 中的第一列和文本截断

Question

我似乎无法让第一列不换行，CDT 一直转到第二行。第二列上有一个文本截断。如何让第一列展开，使该列永不换行。

<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" data-bind="html: TimeFormatted">
    9:05 AM CDT
</div>
<div class="d-flex text-truncate">
    @
    <span class="text-truncate mx-1" data-bind="text: VenueName">
        ACA  dsf asdf sdsadf d fsd fsd fsd fsa
    </span>
    (<span data-bind="text: CourtName">East</span>)
</div>
</div>

Answer 1

使用flex-shrink: 0

<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-shrink-0 flex-nowrap" data-bind="html: TimeFormatted">9:05 AM CDT</div><div class="d-flex text-truncate">@<span class="text-truncate mx-1" data-bind="text: VenueName">ACA  dsf asdf sdsadf d fsd fsd fsd fsa</span> (<span data-bind="text: CourtName">East</span>)</div>
    </div>

Answer 2

第一个div的wrap是text-wrap所以为了避免它，需要设置white-space: nowrap;使文本不换行。

<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" data-bind="html: TimeFormatted" style="white-space: nowrap;">9:05 AM CDT</div>
  <div class="d-flex text-truncate">@<span class="text-truncate mx-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/Nowrap 无法处理 bootstrap 中的第一列和文本截断

Flex/Nowrap not working with first column and text-truncate in bootstrap

css

word-wrap

flexbox

bootstrap-4