时间戳

首页 > 解决方案 > Flex/Nowrap 不能在引导程序中使用第一列和文本截断

css - Flex/Nowrap 不能在引导程序中使用第一列和文本截断

问题描述

我似乎无法让第一列不换行，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>

标签： cssbootstrap-4flexboxword-wrap

解决方案

利用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>

推荐阅读