Using more CSS for shortening text

Tags:

In the large overview, I don't want to display looong notes:

full_length_note

CSS can cut off content after a given number of lines, and also add an ellipsis:

@supports (-webkit-line-clamp: 10) { overflow: hidden; text-overflow: ellipsis; white-space: initial; display: -webkit-box; -webkit-line-clamp: 10; -webkit-box-orient: vertical; }

... dynamically shortening notes that are too long to 10 lines.

shortened note

Again, CSS might be a far too blunt tool here, but on the other side, this means I don't need to figure out a heuristic to determine whether certain markdown text is longer than 10 lines.

Using CSS to add a feature

Tags:

Yesterday I made a change to my toys, the note taking app that was mostly CSS but still added a lot of functionality.

A note should open when clicking on it, but links within the note should be clickable from the general outside view too. Achieving this was weirdly enough done by using the z-index property of the "inner" links that should be clickable and not open the note itself. Raising these inner links "over" the outer link leading to the single note view was something I had not considered at all when thinking about the problem.

I guess this falls under "interesting how versatile a UI toolkit CSS is", and also, "interesting how overengineered the browser as a UI toolkit is"