css - 在Bootstrap中设置最大行数

这是我的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吗？

最佳答案

将此样式添加到工作方式：white-space: nowrap。如Maa中针对white-space所述：


  与normal一样折叠空格，但禁止在文本内换行（换行）。


例如：

.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>

关于css - 在Bootstrap中设置最大行数，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/42798902/