Click here to Skip to main content
15,891,864 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
Is it possible (in Chrome) to combine "ellipsis if more than 3 lines" and "ellipsis for words that do not fit one line"?

As far as I can see, -webkit-line-clamp needs display:-webkit-box, but that does prevent text-overflow: ellipsis to take effect.

-------
In the example, you should see two ellipses. One ellipsis on the last line, because the whole text is larger, and one ellipsis on the second line, because this word does not fit a line.


p {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    max-width: 100px;
    overflow: hidden;
    text-overflow: ellipsis;
    height:56px /* fallback */
}
<p>Lorem ipsumnnnnnnnnnn dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et.</p>


What I have tried:

Note: This is NOT a duplicate of Applying an ellipsis to multiline text as I ask for a combination of two things.
Posted

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900