Firefox users might have recently noticed that LinkedIn profiles display
an ellipsis ("…") but do not allow the text to expand when clicked.
, whereas Chrome users
encounter no such issue.
Firefox: About section |
Firefox: Experience section |
Chrome: About section |
Chrome: Experience section |
Example of Minimal Code:
<html lang="en">
<head>
<style>
.ZPcJ {
position: relative;
}
.inline-show-more-text--is-collapsed-with-line-clamp {
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
}
.inline-show-more-text__link-container-collapsed {
position: absolute;
bottom: 0;
right: 0;
margin: 0;
padding: 0 0 0 0.4rem;
}
</style>
</head>
<body>
<div class="ZPcJ">
<div class="inline-show-more-text--is-collapsed-with-line-clamp">
Proficient Equipped with hands-on experience gained through managing diverse projects during my professional and academic journey, I bring a harmonious balance of analytical thinking, creativity, and resourcefulness to the table.
Motivated by a passion for innovation, I approach every endeavor with determination and a focus on achieving impactful results. From designing scalable architectures to optimizing workflows, I continuously seek opportunities to refine my skills and explore uncharted solutions.
<button type="button" class="inline-show-more-text__link-container-collapsed">
…see more
</button>
</div>
</div>
</body>
</html>
Output:
Chrome always shows the button |
Firefox |
When the "…see more" button is wrapped inside the same div
as the clamped text, the button becomes overlaid and inaccessible.
Chrome is able to display the button, while Firefox does not render it.
A Firefox developer claimed it's a bug in LinkedIn because not rendering the element is the correct behavior per the specifications:
Firefox Nightly 135 has already implemented a short-term fix:
Part of the code fix rolls back the pre-21 Oct behavior by adding a pref: