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。正如white-space的MDN中所述：

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

Answer 2

如果文字总是在一行上，您可以尝试

.pv-archiveText {
  height: 15px;
  overflow-y: auto
}

在Bootstrap中设置最大行数

2 个答案: