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行后截断，而对于＆lt; 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>

Answer 2

 filter('textLimit', function () {
        return function (text, length) {
            if (text.length > length) {
                return text.substr(0, length) + "<span>...</span>";
            }
            return text;
        }
    $scope.text="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 > {{text |textLimit :50}} </span>

如何在移动设备上使用CSS截断文字

2 个答案: