bootstrap 带有最小宽度图像文本截断的卡片，文本未截断

Question

我想制作如下卡片布局：

大布局

中间布局

小布局

..布局非常小

和我的代码笔link：https://codepen.io/qarty1/pen/yLzXjrO

<div class="row row-cols-1 row-cols-md-2 g-2 mt-2 mb-2">
    <div class="col">
        <div class="card episode-list h-100">
            <div class="row g-0">
                <div class="col flex-grow-1">
                    <div class="card-body">
                        <h5 class="card-title">1</h5>
                        <p class="card-text mb-1 text-truncate">Goooooooooooooooooooooooooooooooooogle</p>
                        <p class="card-text"><small class="text-muted">2018-12-03</small></p>
                    </div>
                </div>
                <div class="col-3 flex-shrink-0 card-list-right border-start">
                    <a href="#" target="_blank" class="stretched-link">
                        <img src="https://i.ibb.co/2PVD70J/thu.png" class="img-fluid episode-thumb" alt="156 x 208 img here">
                    </a>
                </div>
            </div>
            <div class="card-footer">
                <div class="d-flex">
                    <div class="flex-shrink-0 align-self-center">
                    Keyword
                    </div>
                    <div class="flex-grow-1 ms-2">
                        <span>
                        <a href="#" class="link-dark position-relative" style="white-space: nowrap;">portal</a>
                        </span><span>
                        <a href="#" class="link-dark position-relative" style="white-space: nowrap;">search</a>
                        </span><span>
                        <a href="#" class="link-dark position-relative" style="white-space: nowrap;">site</a>
                        </span><span>
                        <a href="#" class="link-dark position-relative" style="white-space: nowrap;">web</a>
                        </span><span>
                        <a href="#" class="link-dark position-relative" style="white-space: nowrap;">homepage</a>
                        </span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

如果布局非常小 'Goooooooooooooogle' 不会被截断但是右图是秋天。

我觉得有问题

这段代码有什么问题？

Answer 1

为了让text-truncate工作，需要给card-textclass

任何min-width

.card-text{
  min-width: 2px;
}

bootstrap 带有最小宽度图像文本截断的卡片，文本未截断

bootstrap card with min-width image text-truncate, text is not truncated

flexbox

twitter-bootstrap

card

bootstrap-5