css - 在 Bootstrap 中设置最大行数

Question

这是我的 HTML:

    <a href="#" ng-repeat="archive in archives" class="list-group-item list-group-item-action flex-column align-items-start">
        <div class="d-flex w-100 justify-content-between">
            <h5 class="mb-1"><b>{{extractDomain(archive.url)}}</b></h5>
        </div>
            <p class="mb-1">{{archive.headline}}</p>
            <p class="pv-archiveText">{{archive.text}}</p>
    </a>

</div>

和CSS:

.pv-archiveText {
  text-overflow: ellipsis;
  color: red;
}

我看到文本为红色，但它并不仅限于一行。我试过了

{
   overflow: hidden;
   text-overflow: ellipsis;
   display: -webkit-box;
   -webkit-box-orient: vertical;
   -webkit-line-clamp: N; /* number of lines to show */
   line-height: X;        /* fallback */
   max-height: X*N;       /* fallback */
}

和多种其他样式，但它们都不起作用。是因为 Bootstrap/Angular 吗？

Answer 1

将此添加到样式中有效:white-space: nowrap。如 MDN 中所述 white-space :

Collapses whitespace as for normal, but suppresses line breaks (text wrapping) within text.

例如:

.pv-archiveText {
    white-space: nowrap;
    text-overflow: ellipsis;
    color: red;
    overflow: hidden;
}

<p class="pv-archiveText">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ligula libero, interdum id risus bibendum, sagittis ultrices est. Suspendisse elit felis, finibus eget rutrum eget, ultricies nec odio. Suspendisse ut nisl sit amet quam mattis dapibus. Praesent auctor hendrerit elit sed hendrerit.
</p>