CSS Riddle: reverse ellipsis

1 · Hugo Giraudel · Dec. 16, 2014, midnight
The other day, I wanted to do something in CSS that turned out to be quite complicated to achieve. Actually it’s amazing that something that common ends up being so difficult to implement. Anyway, how would you do a reverse ellipsis in CSS, or start ellipsis? A single-line end-ellipsis is often used when you have some long content that you want to hide behind a ... to prevent a line-break. It is very easy to do. You can implement it with: /** * 1. Hide any overflow * 2. Prevent any line-break ...