css - 如何在移动设备上使用 CSS 截断文本

Question

有没有办法通过 CSS 根据当前屏幕尺寸/媒体查询截断文本？例如我有这段文字:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam porta tortor
vitae nisl tincidunt varius. Lorem ipsum dolor sit amet, consectetur 
adipiscing elit. Ut vel ullamcorper tortor. Nullam vel turpis a augue tempor 
posuere vel quis nibh. Nam ultrices felis turpis, at commodo ipsum tristique 
non. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere 
cubilia Curae; Suspendisse in accumsan dui, finibus pharetra est. Lorem ipsum 
dolor sit amet, consectetur adipiscing elit. Quisque vitae velit eu dui 
rutrum pellentesque vel imperdiet sem. Morbi ut lacinia lacus, in commodo 
nibh. Sed cursus ante ut nunc molestie viverra.

使用 CSS，我可以根据他们查看页面时使用的设备截断上面的文本吗？因此，如果在移动设备上，它会像这样截断:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam porta tortor 
vitae nisl tincidunt varius. Lorem ipsum dolor sit amet, consectetur 
adipiscing elit. Ut vel ullamcorper...

我找到了这个选项，但它似乎只适用于宽度。所以只会显示一行文字。我只是想根据他们正在查看页面的当前设备显示这么多字母。

.truncate-ellipsis {
    display: table;
    table-layout: fixed;
    width: 100%;
    white-space: nowrap;
}

.truncate-ellipsis > * {
    display: table-cell;
    overflow: hidden;
    text-overflow: ellipsis;
}

<div class="truncate-ellipsis">
    <span>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam porta tortor vitae nisl tincidunt varius. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut vel ullamcorper tortor. Nullam vel turpis a augue tempor posuere vel quis nibh. Nam ultrices felis turpis, at commodo ipsum tristique non. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Suspendisse in accumsan dui, finibus pharetra est. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque vitae velit eu dui rutrum pellentesque vel imperdiet sem. Morbi ut lacinia lacus, in commodo nibh. Sed cursus ante ut nunc molestie viverra.
    </span>
</div>

Answer 1

我已经使用flex 来实现多行截断。在大型设备上，它将在 6 行后截断，而对于 <768px，它将在 3 行后截断。

p {
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 6;
  -webkit-box-orient: vertical;
}

@media screen and (max-width: 768px) {
  p{
    -webkit-line-clamp: 3;
  }
}

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam porta tortor
vitae nisl tincidunt varius. Lorem ipsum dolor sit amet, consectetur 
adipiscing elit. Ut vel ullamcorper tortor. Nullam vel turpis a augue tempor 
posuere vel quis nibh. Nam ultrices felis turpis, at commodo ipsum tristique 
non. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere 
cubilia Curae; Suspendisse in accumsan dui, finibus pharetra est. Lorem ipsum 
dolor sit amet, consectetur adipiscing elit. Quisque vitae velit eu dui 
rutrum pellentesque vel imperdiet sem. Morbi ut lacinia lacus, in commodo 
nibh. Sed cursus ante ut nunc molestie viverra.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam porta tortor
vitae nisl tincidunt varius. Lorem ipsum dolor sit amet, consectetur 
adipiscing elit. Ut vel ullamcorper tortor. Nullam vel turpis a augue tempor 
posuere vel quis nibh. Nam ultrices felis turpis, at commodo ipsum tristique 
non. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere 
cubilia Curae; Suspendisse in accumsan dui, finibus pharetra est. Lorem ipsum 
dolor sit amet, consectetur adipiscing elit. Quisque vitae velit eu dui 
rutrum pellentesque vel imperdiet sem. Morbi ut lacinia lacus, in commodo 
nibh. Sed cursus ante ut nunc molestie viverra.</p>