Firefox
users might notice 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.
Since LinkedIn is owned by Microsoft, such Firefox-specific bugs are perhaps unsurprising.
No comments:
Post a Comment