CODEWITHSUNDEEP
cssmobilewebkitresponsive
Jesper Andersen
Jesper Andersen

Reputation: 574

webkit box & line-clamp on phones

I have a div that looks roughly like this

<div class="document-teaser" style="display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; word-break: break-all; text-overflow: ellipsis; -webkit-line-clamp: 7; width: 500px">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam auctor sollicitudin magna, ut lacinia nulla accumsan non. Pellentesque nulla risus, pellentesque nec tincidunt nec, commodo quis orci. Suspendisse gravida massa felis. Proin ac nisl id ante vehicula mollis nec a felis. Mauris lobortis tincidunt libero scelerisque faucibus. Morbi tempor nunc a porta pellentesque. Fusce scelerisque diam ac dapibus tristique. Suspendisse finibus maximus nunc, at faucibus lorem commodo nec.</p>
    <p>Duis nec nibh feugiat, interdum eros ut, consectetur eros. Praesent eu pretium lectus, eget ornare odio. Duis at sollicitudin augue, at fermentum nibh. Donec ante erat, tristique sed venenatis vitae, suscipit a urna. Maecenas in cursus ipsum, ac fermentum augue. Nulla pretium urna justo, vulputate posuere ante tempor vel. Vestibulum ut ligula congue, gravida ex eget, cursus est.</p>
    <p>Donec sed mi faucibus ligula venenatis cursus. Fusce faucibus, arcu vitae sagittis aliquet, dui justo accumsan nisl, eget condimentum lacus velit mattis tellus. Donec sed consectetur urna. In malesuada volutpat augue, quis scelerisque tortor porta quis. Vivamus est metus, vehicula at ultricies ac, ornare vel mi. Donec vel vestibulum ligula. Vivamus sit amet purus odio. Nunc ullamcorper auctor sapien id pellentesque. Phasellus varius ultrices lacinia. Donec a sem ut lacus dignissim bibendum. Cras auctor.</p>
</div>

The styles are added by vue-line-clamp and it works fine on desktop with all viewports. As soon as I go to my phone, it starts acting up.

The styles are still on the parent, but it is working as if it's applied to all the children. Thus, all p tags get line-clamp to 7, all of them get ellipsis and all have overflow hidden. First of all, this makes all 3 P tags show (which isn't the case on desktop) and it seems like the last two p tags are mushed together so their text is overlapping.

Is the whole webkit box/line-clamp just incompatible with mobile phones or do I need to change something?

Upvotes: 0

Views: 1305

Answers (1)

lucimart
lucimart

Reputation: 11

For future reference, try also limiting the max-height, in your case for a 7 line clamp, max-height: 8.75 rem might do it, as it did for me. This will also make it work not only on Safari iOS, but also IE, as line-clamp is not supported on IE.

Upvotes: 1

Related Questions