如何在移动设备上使用 CSS 截断文本
How to truncate text using CSS on mobile devices
有没有办法通过 CSS 根据当前屏幕 size/media 查询截断文本?例如我有这段文字:
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>
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>
我已经用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>
有没有办法通过 CSS 根据当前屏幕 size/media 查询截断文本?例如我有这段文字:
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>
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>
我已经用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>